CSS3调整背景图片大小的操作代码
<p>在CSS3中，如果想要调整背景图片的大小可以通过设置background-size属性进行设置。</p><h2>一、background-size 语法格式</h2>
<div class="jb51code"><pre class="brush:css;">background-size: length|percentage|cover|contain;</pre></div>
<h2>二、参数详解</h2>
<p>使用的例子背景图片</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202401/2024011915043351.jpg" /></p>
<h3>1.length</h3>
<p>length：设置背景图片的高度与宽度。第一个值设置宽度，第二个值为高度。如果只给出第一个值，那么第二值则设置为auto（自动）。</p>
<p>举例，将背景图片改为20emx20em(默认1px = .05em)</p>
<div class="jb51code"><pre class="brush:css;"> width: 30em;
height: 22em;
background: greenyellow;
background-size:20em 20em;
background-image: url("src/assets/csdn/bg.jpg");
background-repeat: no-repeat;</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202401/2024011915043452.jpg" /></p>
<h3>2.percentage</h3>
<p>percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值为高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为auto(自动)。</p>
<div class="jb51code"><pre class="brush:css;"> background-size:80% 70%;</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202401/2024011915043453.jpg" /></p>
<h3>3.cover</h3>
<p>cover：保持图像的横纵比将图像缩放成完全覆盖背景定位区域的最小大小。</p>
<div class="jb51code"><pre class="brush:css;">background-size:cover;</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202401/2024011915043454.jpg" /></p>
<h3>4.contain</h3>
<p>contain：保持图像的横纵比将图像缩放成适应背景区域的最大大小。</p>
<div class="jb51code"><pre class="brush:css;">background-size:contain;</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202401/2024011915043455.jpg" /></p>
<h2>总结</h2>
<p>以上就是css如何改变背景图片大小的详细内容。。</p>
頁:
[1]