背景样式
Posted lujieting
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了背景样式相关的知识,希望对你有一定的参考价值。
<style>
div{
width: 300px;
height: 500px;
border: 1px solid red;
/*添加背景*/
background-image: url("images/img/bg-img.jpg");
/*background-image: url("images/img/share1.png");*/
background-repeat: no-repeat;
/*设置背景图片的大小 宽度/高度 宽度/auto(保持比例自动缩放)
建议:在使用这个属性之前衔确定宽高比与容器的宽高比是否一致,否则会造成图片失真变形*/
background-size: 300px 500px;
background-size: 300px;
/*设置百分比,是参照父容器可放置内容区域的百分比*/
background-size: 50% 50%;
/*设置contain:按比例调整图片大小,使用图片宽高自适应整个元素的背景区域,使图片全部包含在容器内
1.图片大于容器:有可能造成容器的空白区域,将图片缩小
2.图片小于容器:有可能造成容器的空白区域,将图片放大*/
background-size: contain;
/*cover:与contain刚好相反,背景图片会按比例缩放自 适应整个背景区域,如果背景区域不足以包含所有背景图片,图片内容会溢出
1.图片大于容器:等比例缩小,会填满整个背景区域,有可能造成图片的某些区域不可见
2.图片小于容器:等比例放大,填满整个背景区域,图片有可能造成某个方向上内容的溢出*/
background-size: cover;
}
</style>
</head>
<body>
<div></div>
以上是关于背景样式的主要内容,如果未能解决你的问题,请参考以下文章