Question

h2 {background-color:#C61236; 
color:#FFFFFF; 
font-size:medium; 
line-height:1.5; 
text-indent:20px;}

这就是我现在所拥有的，但我想在文本开头添加一个不同的颜色块。

不确定如何继续..

Answer 1

如果你将测试包裹在一个范围内，这很容易。

<h2><span>Text</span></h2>

将一种颜色应用于h2背景，将一种颜色应用于跨度。使用填充来显示h2背景：

h2 {
    background-color:#C61236; 
    color:#FFFFFF; 
    font-size:medium; 
    line-height:1.5; 
    /*text-indent:20px;*/
    padding-left:20px;
}

h2 span {
    background-color:#f00;
}

Answer 2

我能想到的最简单的语义方法是删除你的文本缩进并添加所需颜色的左边框，即

h2 {background-color:#C61236; 
color:#FFFFFF; 
font-size:medium; 
line-height:1.5;
border-left: 20px solid yellow;}

您可以在this jsFiddle中看到它。

你也应该在你的行高添加一个单位。

Answer 3

有几种方法可以做到这一点。我认为最简单的方法是为左背景颜色创建一个小的单色图像，并使用块颜色作为文本背后的主要颜色，将图像设置为垂直向下标题的块的背景：

background: #C61236 url( 'singlecolour.png' ) top left repeat-y;

Answer 4

如果可以使用替代选项，则可以使用CSS3渐变作为背景：

background-image: linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -o-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -moz-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -webkit-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -ms-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);

Answer 5

请参阅简单代码： -

h2 {background-color:#C61236;
color:#FFFFFF;
font-size:medium;
position:relative;
margin:10px 0 0  50px;
}
h2:before {
position:absolute;
content:" ";    
background:blue;
width:100px;
left:-100px;
top:0;
bottom:0;
}

请参阅演示： - http://jsfiddle.net/3EY7t/3/

如何使用css在标题后面放置两种不同的颜色？

5 个答案: