Question

我需要在CSS中创建以下内容并使其适用于IE7 +（如果可能，还可以使用Firefox）：

除背景外，一切都已完成！

报价每次都不同，因此背景需要自动调整高度。

它还需要自动调整放置在其中的容器的宽度。通过这个，我的意思是渐变不能伸展。背景需要是渐变左渐变，然后是背景颜色，然后是淡出右渐变。

这是我当前的代码 - now on JSFiddle ：

HTML

<div id="ehs-quotecontainer">
    <div id="ehs-bgleft">
    </div>
    <div id="ehs-bgright">
    </div>
    <div class="ehs-marks" id="ehs-marktop">                    
        “
    </div>
    <span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
    <div class="ehs-marks" id="ehs-markbottom">
        ”
    </div>
</div>

CSS

#ehs-quotecontainer  {
    padding-top:8px;
    padding-bottom:8px;
    background-color:#F7F8FA;
    text-align:center;
}
#ehs-bgleft {
    background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
    background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
    height:20px;
    color:#8B8C90;
    font-size:5.0em;
}
#ehs-marktop {
    float:left;
    margin-top:-18px;
}
#ehs-markbottom {
    float:right;
    margin-top:-5px;
}
.ehs-quotetext {
    padding-left:4px;
    padding-right:4px;
    color:#000;
    font-size:1.1em;
    font-style:italic;
}

有关如何使背景正常工作的任何想法？

Answer 1

最简单的方法是创建整个引用position:relative，以便您可以相对于报价容器在其中放置内容。

之后你要问的很容易做到：

http://jsfiddle.net/7GEah/1/

Answer 2

像这样：http://www.webdevout.net/test?012&raw

<!doctype html>
<html>
    <head>
        <title></title>
        <link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
        <style>
body {
    background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px;
    margin: 71px 8px 8px;
}
.quote {
    border: 1px solid #dfdfdf;
    position: relative;
    padding: 8px 35px;
}
.quote 
p {
    margin: 0;
    font: italic 12px sans-serif;
    text-align: center;
    position: relative;
    z-index: 1;
}
.quote .w, 
.quote .e {
    position: absolute;
    top: 0;
    width: 75px;
    height: 100%;
    background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
    background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote 
span {
    color: #898a8e;
    font: 70px/70px allerta, serif;
    position: absolute;
}
.quote 
.ldquo {
    left: -35px;
    top: -15px;
}
.quote 
.rdquo {
    right: -35px;
    bottom: -42px;
}
        </style>
    </head>
    <body>
        <div style="width: 209px;">
            <div class="quote">
                <p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
                <div class="w"></div>
                <div class="e"></div>
            </div>
        </div>
    </body>
</html>

Answer 3

你能创建一个单独的图像，中间的渐变会议吗？如果是这样，您可以使用：

#ehs-quotecontainer {
    background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}

如果您已经定义了盒子的边缘（看起来你已经有了），这将始终将渐变图像置于文本的中心。

我应该补充一点，如果你的图像太窄，你的背景颜色会与图像的边缘混合，而不是分散到中间，这可能不是你想要的。

Answer 4

我不想这么说，但是因为你将使用一个非常小的图像，你不会使用背景并插入你的背景文本。

所以在这里你会：

您使用引号保留背景，因为它是
使用您拥有的背景插入文字。最后你可以给文本一些填充。你准备好了。

两个图像包含div的背景？

4 个答案: