0

我必须从某个位置开始背景颜色，而不是申请整个元素。

html

<p class="tax-free-keksis">text here text here text here text here text here text here text here text here text here text here text here  text heretext here text here</p>

css

p.tax-free-keksis {
background-image: url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png);
background-position: left center;
background-repeat: no-repeat;
background-color: #c2e8fb;
padding-top: 15px;
padding-left: 50px;
padding-right: 10px;
text-align: left;
}

链接到 jsfiddle：http: //jsfiddle.net/MVST6/

我需要 background-color: #c2e8fb 从左边开始大约 50px （这样复选标记图像背景是白色而不是蓝色）。

我认为我不能以某种“正常”的方式定位背景颜色。在这里，我需要一些我不知道的修复，因为我不是 CSS 开发人员，而且我是设计网页的新手。

4

4 回答 4

1

使用背景颜色是不可能的，但可以使用渐变背景图像：

background-image:
    linear-gradient(to right, transparent 50px, #c2e8fb 50px),
    url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png);

如果你需要支持老式浏览器，你有两个使用两个元素：一个带有背景颜色，另一个带有背景图像。

于 2013-06-09T14:26:34.813 回答
1

这是另一种选择：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

p.tax-free-keksis {
    position: relative;
    background-color: #c2e8fb;
    padding-top: 15px;
    margin-left: 50px;
    padding-right: 10px;
    text-align: left;
}

.tax-free-keksis:before {
    content: url(http://tax.allfaces.lv/templates/tax/images/poga_keksis.png);
    position: absolute;
    left: -50px;
    top: 0;
}

</style>
</head>
<body>

<p class="tax-free-keksis">text here text here text here text here text here text here text here text here text here text here text here text heretext here text here
    </p>

</body>
</html>
于 2013-06-09T14:30:04.700 回答
0

你不能这样做。也许尝试这样的事情：

HTML

<p class="tax-free-keksis">
    <img src="http://tax.allfaces.lv/templates/tax/images/poga_keksis.png">
        text here text here text here text here text here text here text here text here text here text here text here text heretext here text hered
    </p>

CSS

p.tax-free-keksis {
    background-repeat: no-repeat;
    background-color: #c2e8fb;
    padding-top: 15px;
    margin-left: 50px;
    padding-right: 10px;
    text-align: left;
}
p.tax-free-keksis img {
    position: relative;
    float: left;
    left: -50px;
    top: -25px;
}
于 2013-06-09T14:18:16.930 回答
0

您可以使用以下代码：

position: fixed; 
top: 0; 
left: -120px; 
width: 50%; 
height: 100%; 
border-right:1px solid #d0d0d0; 
background-color: red; (if you want you can put image here)
z-index: -10;

此代码用于图像。然后，你应该给文本一个样式并给它填充。

于 2013-06-09T14:18:40.343 回答