Question

我有一个像FIDDLE

这样的网页

body {
    margin:0 auto;
    max-width: 800px;
    padding:0 0 0 0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
    }

带有重复的背景图片，但重叠的文字并非易读。

我想在文字后面放一个矩形（一种颜色或可能是50％透明 - 可能是另一个小的，半透明的png重复？），这样它更容易阅读 - 它应该是与文本一样宽（800px），高度应为100％。

这可能吗？谢谢。

编辑：为了更清楚，我希望黑暗（或半透明）层从上到下遍历整个页面，因此它位于徽标后面，可能还有页脚同样，不仅仅是文本的位置

Answer 1

将文本放在带有一些id的div中，然后将css应用于该div。

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg" ALT="" BORDER="0">
<br>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat dolor, pulvinar eget erat id, gravida hendrerit nisl. Nunc nec laoreet mi. Donec posuere dui id diam semper, ut venenatis nibh tincidunt. Nulla blandit mattis nulla, sed rutrum metus convallis ut. Maecenas sed massa erat. Fusce augue erat, malesuada eget hendrerit et, viverra ac ligula. Donec eu mi ex. Aenean interdum magna ultrices massa convallis, sit amet varius tortor fringilla. In congue odio sapien.
</div>

CSS

body {
    margin:0 auto;
    max-width: 800px;
    padding:0 0 0 0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
    }    

#content{
  background-color: rgba(255, 255, 255, 0.84);
  padding: 10px;
  text-align: justify;
  border-radius: 15px;
}

选中此Fiddle

Answer 2

我已根据您的要求修改了代码。

对css进行了一些更改，使徽标显示在中心并添加了页脚。

HTML

<div id="content">
    <IMG SRC="http://upload.wikimedia.org/wikipedia/commons/5/59/Logo-Logo.svg" ALT="" BORDER="0" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat dolor, pulvinar eget erat id, gravida hendrerit nisl. Nunc nec laoreet mi. Donec posuere dui id diam semper, ut venenatis nibh tincidunt. Nulla blandit mattis nulla, sed rutrum metus convallis ut. Maecenas sed massa erat. Fusce augue erat, malesuada eget hendrerit et, viverra ac ligula. Donec eu mi ex. Aenean interdum magna ultrices massa convallis, sit amet varius tortor fringilla. In congue odio sapien.</p>
    <p>Nam ut nisi varius, pretium nisl vitae, dignissim lectus. Donec vel tortor commodo, congue sem nec, lobortis neque. Pellentesque tortor elit, aliquam vel porttitor ac, luctus a dolor. Proin fringilla, orci id fermentum luctus, dolor felis convallis mauris, et finibus nunc nulla sed massa. Mauris pellentesque felis eget justo commodo tempor id eu magna. Ut auctor massa vel risus viverra lobortis. Aenean vitae turpis vel erat feugiat ullamcorper. In et erat neque. Nulla efficitur turpis nisl, non dictum leo ullamcorper vel. Vestibulum dignissim venenatis est eget cursus. Cras accumsan placerat luctus. Pellentesque elementum risus nisi, in imperdiet tortor iaculis non. Donec malesuada ut felis at vehicula. Proin quis lorem elit. Nunc at nulla convallis lacus euismod maximus convallis id mauris. Quisque rhoncus tincidunt malesuada.</p>
    <p>Praesent malesuada interdum pretium. In vulputate turpis fermentum dolor sodales, placerat feugiat nibh sollicitudin. Duis egestas, nisl ac mattis elementum, neque tellus sagittis magna, vitae aliquet justo ex id nulla. Suspendisse sit amet porta nunc. Nulla luctus cursus leo ut maximus. Nullam auctor justo eget eros pulvinar varius. Maecenas condimentum neque sit amet lacus rutrum faucibus. Fusce sodales mattis elementum. Morbi tempor purus felis, maximus viverra lorem venenatis ut. Nulla facilisi. Vestibulum condimentum porta lorem. Maecenas nec placerat elit. Phasellus et nisi tincidunt, ullamcorper erat ut, mollis eros.</p>
    <p>Ut scelerisque, quam eu varius consectetur, ex lacus ornare turpis, vitae tempus ex dolor elementum neque. Donec sodales orci nulla, vel semper libero porta nec. Aliquam ut cursus ante. Proin rutrum commodo dui, et posuere purus cursus eget. Mauris egestas vel risus nec consequat. Quisque sit amet leo maximus nunc porta fermentum sit amet non justo. Donec accumsan iaculis suscipit. Phasellus rutrum venenatis neque, dapibus pellentesque eros finibus a. Aliquam tincidunt tortor et ipsum consequat placerat. Vivamus scelerisque libero quis mauris gravida, et tempor elit ultrices. Aenean accumsan porttitor placerat. Phasellus egestas maximus ligula, a imperdiet mi condimentum sit amet</p>
    <footer> <span>www.whatever.com &copy; 2015</span></footer>
</div>

css for img

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

页脚的CSS

footer {
    bottom:0;
    position:absolute;
    background-color:rgb(90, 90, 90);
    margin-left: -10px;
    width:100%;
    height:30px;
    line-height:30px;
    border-radius:5px;
}

选中此pen

Answer 3

我更新了一些代码 Try this

body {
    margin:0 auto;
    max-width: 800px;
    padding:0 0 0 0;
    text-align:left;
    background-color:#FFFFFF;
    background-image: url('http://freeseamlesstextures.com/images/40-dirty-paper-background-sml.jpg');
    font-family: "Arial CE", "Helvetica CE", Arial, sans-serif;color:orange
    }    

.text-container{
    background: rgba(0, 0, 0, 0.49);
    padding: 10px;
}

HTML - 一定宽度的居中透明矩形

3 个答案: