位置的背景颜色答案

【问题标题】：background color from position位置的背景颜色
【发布时间】：2013-06-09 22:30:04
【问题描述】：

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

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 从左边开始大约 50 像素（这样复选标记图像背景是白色而不是蓝色）。

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

【问题讨论】：

我认为 CSS 伪选择器 :before 和 :after 将有助于实现这一目标，请查看。

标签： css background-color

【解决方案1】：

背景颜色不可能，但 a gradient background image 可能：

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

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

【讨论】：

【解决方案2】：

这是另一个选择：

<!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>

【讨论】：

【解决方案3】：

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

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;
}

【讨论】：

【解决方案4】：

您可以使用此代码：

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;

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

【讨论】：

我不明白你的回答。