Question

我试图获得一些双色调文本的背景，或者上半部分是一种颜色而下半部分是另一种颜色。我附上了一个链接，指出这应该是什么样子。有关如何实现这一目标的任何想法？提前谢谢你的帮助！

迈克尔

http://michaelphillips.dropmark.com/12339/296433

Answer 1

有三种想法：

一个：大多数跨浏览器（CSS1）：制作两种颜色的1px宽图像，每种颜色可能大约30px高，然后

<span class="duoTone">wrap your text in a span</span>

并设置

.duoTone {background-image: url(path/to/your/img.jpg) left center repeat-x;}

两个：对旧版浏览器不太友好（CSS2）：与上面的span包装相同但使用此css（see fiddle）。

.duoTone {
   position: relative;
}

.duoTone:before,
.duoTone:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 50%;
   z-index: -1;
   background-color: #bbbbbb;
}

.duoTone:after {
   top: auto;
   bottom: 0;
   background-color: #888888;
}

三：时尚，但仅适用于较新的浏览器（CSS3）：与{1 see fiddle相同的span代码。

.duoTone {
   background-color: #888888 ;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .4)), color-stop(.5, transparent), to(transparent));
   background-image: -moz-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
   background-image: -o-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
   background-image: linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
}

CSS中文本的双色调背景

1 个答案: