如何实现HTML / CSS的背景效果？ [英] How do I achieve a page-over-the-background effect with HTML/CSS?
本文介绍了如何实现HTML / CSS的背景效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是网页设计的新手。我想让我的页面看起来像这里的页面： http://www.456bereastreet.com/ archive / 200501 / turning_a_list_into_a_navigation_bar
其中包含所有内容的灰色背景上有一个圆角矩形。
I'm new to web design. I want to make my page look something like the one here: http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar where there's a rounded rectangle over the grey background that holds all the content. How do I do this?
推荐答案
这是页面当前使用的基本HTML和CSS样式。因此，他们将所有内容包装在< div> 中，并将该特定样式类应用于 div 。
This is the basic HTML and CSS style that page is currently using. So, they're wrapping all of their content in a <div> and applying that specific style class to the div.
HTML：
<body>
<div class="wrap">
...Content...
</div>
</body>
CSS：
body {
min-width: 0;
}
body {
color: #333333;
font: 100%/1.4 Georgia,serif;
margin: 0 auto;
max-width: 100%;
min-width: 830px;
padding: 0;
width: 62em;
}
<!--wrap class css code-->
.wrap {
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
background: none repeat scroll 0 0 #FFFFF0;
margin: 16px;
padding: 10px 0 0;
position: relative;
}
这篇关于如何实现HTML / CSS的背景效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
