发表于: 2019-10-08 19:39:42

1 868


今天完成的事件,

问题:在设置背景图片的时候在浏览器收缩的时候图片不跟着这浏览器大小变化原因是我在背景图片设置的cover它会把图片剪切,

问题解决:我把图片设置到中间2边白色用橙色背景图片掩盖。效果如下

代码如下

.img{
background:url(picture/快人一步.pngcenter 0 /contain ;
height248px;
background-color:#f2a845;
background-repeatno-repeat;
}


这里要注意 如果你不设置contain属性,那么收缩的时候还是会被剪切掉好像是因为我设置的背景颜色的原因,影响到背景图片。

contain 属性

这个 contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系;我们可以把它看做一个iframe。跟iframe很相似,它能建立起一个边界,产生一个新的根布局;保证了它和它的子元素的DOM变化不会触发父元素重新布局、渲染等。

大概就是隔离我设置的背景颜色的影响。

参考:http://www.webhek.com/post/css-contain-property.html

又出现以下问题

看了下师兄的解决方法。是设置媒体查询代码如下

@media only screen and (max-width1200px){
.img {
width100%;
height20vw;
}

已解决。


3个网页做完 接下就是改些细节的用时1周。



返回列表 返回列表
评论

    分享到