Question

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

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/

我需要背景颜色：＃c2e8fb从左边开始大约50px（这样勾选图像背景是白色而不是蓝色）。

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

Answer 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);

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

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

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

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

此代码用于图像。然后，您应该为文本添加样式并为其添加填充。

背景颜色从位置

4 个答案: