外面的div设置了width为100%且有背景颜色，但当浏览器改变大小后，背景就没法出现100%的效果了！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了外面的div设置了width为100%且有背景颜色，但当浏览器改变大小后，背景就没法出现100%的效果了！相关的知识，希望对你有一定的参考价值。
<body>
<div style="width:100%; background:red;">
<div style="margin:0 auto;">/*内容什么都行，但是居中*/</div>
</div>
</body>
<div style="margin:0 auto; width:50%;"><div style="background:#066; height:200px;"></div></div>
</div>
随便帮你加了个块。中间的内容可以居中呀。改变浏览器大小依然是100%效果的。你把中间的内容也定个比例宽度看下，可以是随屏比列的。 参考技术A 可以给你的body属性加一个min-width：xxxpx ;
这个值最好是你内容器的宽度。
比如,
<body>
<div style="width:100%; background:red;">
<div style="margin:0 auto; width:1000px;">/*内容什bai么都行，但是居中*/</div>
</div>
</body>
这个min-width值就是1000px。 参考技术B 如果背景图片是通过repeat效果产生的，没有你说的问题
如果背景图片是张图片，应该会产生你说的问题，一般只能做到相对效果，你可以这样定义背景样式 background:url(bg.gif) repeat center top; 参考技术C <body>
<div style="width:100%; background:red;">
<div style="margin:0 auto; width:1000px;">/*内容什么都行，但是居中*/</div>
</div>
</body>
如果纯文字剧中就写个text-align:center;
子DIV没有宽度不好居中 参考技术D 用你上面的代码测试,没发现你说的问题,问题的原因也许不在那个100%上.追问
背景如果换成一张横向平铺的图片，但把浏览器窗口变小后（如宽度小于1000px），背景的效果只有当前浏览器的窗口的宽度，但浏览器会自动根据内容的大小出现滚动条，拉动滚动条后背景却没有100%的效果。
追答第一,如果DIV的子元素不是浮动元素,那么它的宽度不可能超过父元素,要么小于等于父元素,要么将父元素撑大.
第二,如果是两个同级元素,其中一个100%宽,另一个由于内容过宽被撑大到超出100%,那么是可以出现你所说的情况的,但是这是两个元素,不会互相影响.
设置div背景透明的方法?
设置div背景透明的方法?
参考技术A opacity和rgba都是设置透明度的，区别在于opacity是整体的透明度，标签本身及标签内容还有标签的子元素都会受到影响。rgba仅仅是改变元素的添加背景色，内容及子元素不受影响。<div class="test tstop">233</div>
<div class="test tstrgba">666</div>
.test width: 200px; height: 200px
.tstop background: red; opacity: 0.6
.tstrgba background: rgba(255, 0, 0, 0.6)
可以实际体验一下。 参考技术B 说的不明确，背景透明，是颜色，还是背景图片，还是整个div
背景颜色：可以使用：rgba(0,0,0,0.5)，最后一个值是透明度
div透明度：opacity(.5) 参考技术C opacity：0，这样可以设置背景的透明度
以上是关于外面的div设置了width为100%且有背景颜色，但当浏览器改变大小后，背景就没法出现100%的效果了！的主要内容，如果未能解决你的问题，请参考以下文章
css怎样才能设置高度为100%，就是里面的div跟着外面的大div增高。
设置整个页面的背景颜色，解决height:100%不起作用问题
css设置背景颜色了，为什么没出来，在设计里有，在网页中就没有？求解