保留背景内容

时间:2014-12-11 16:47:30

标签: html css

我想从其他内容中排除背景或背景图片,就像这样 jsfiddle.net/vyqqsy1f/17/

<div id="container">

    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

CSS

body
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;

  background: -webkit-linear-gradient(#A0A0A0, #FFFFFF); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#A0A0A0, #FFFFFF); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#A0A0A0, #FFFFFF); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#A0A0A0, #FFFFFF); /* Standard syntax */
  background-repeat: no-repeat;
  /*background-attachment:fixed;*/
  /*background-clip: content-box;*/
}

#container
{
    /*width:70%;*/
    width:670px;
    height:400px;
    position:relative;
    margin:0 auto;
    border: 2px solid #ccc;
}

有什么办法吗?

1 个答案:

答案 0 :(得分:2)

我想你希望你的文字背景清晰。您所要做的就是将文本包装在div中:

<body>

<div id="container">
<div id="inner">
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

和css:

body
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;

  background: -webkit-linear-gradient(#A0A0A0, #FFFFFF); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#A0A0A0, #FFFFFF); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#A0A0A0, #FFFFFF); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#A0A0A0, #FFFFFF); /* Standard syntax */
  background-repeat: no-repeat;
  /*background-attachment:fixed;*/
  /*background-clip: content-box;*/
}

#container
{
    /*width:70%;*/
    width:670px;
    height:400px;
    position:relative;
    margin:0 auto;
    border: 2px solid #ccc;
}

#inner {
    background-color: #fff;
    height: auto;
}