如何使用CSS拉伸和缩放背景图像?

想要使用CSS拉伸和缩放背景图像,可以使用background-size属性;background-size属性指定背景图像的尺寸,可用于拉伸和缩放背景图像。

语法:

background-size: auto|length|cover|contain|initial|inherit;

属性值:

● cover:用于沿X和Y方向拉伸背景图像并覆盖整个区域。

● length:用于缩放背景图像。它改变了背景图像的大小。长度值可以是px、em%等形式。

● contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

示例1:在x和y方向上拉伸背景图像

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
	/*background-size: 100% auto no-repeat */ 
         #example1 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: 100% auto; 
         } 
         /*background-size:auto no-repeat*/ 
         #example2 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: auto; 
         } 
         /* background-size: cover no-repeat */ 
         #example3 { 
             border: 2px solid black; 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: cover; 
         } 
      </style> 
   </head> 
     
   <body> 
      <h2>background-size: 100% auto :</h2> 
      <p> 背景图像以其原始大小显示。</p> 
      <div id="example1"></div> 
        
      <h2>background-size: auto (default):</h2> 
      <p>背景图像设置为auto。</p> 
      <div id="example2"></div> 
        
      <h2>background-size: cover:</h2> 
      <p> 背景图像设置为cover到指定区域。
      </p> 
      <div id="example3"></div> 
        
   </body> 
</html>

效果图:

e56a9de49a71d3f5cc5b8fa5624b215.png

示例2:缩放背景图像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>

         #example1 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: initial; 
         } 

         #example2 { 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             border: 2px solid black; 
             background: url(1.jpg); 
             background-size: contain; 
         } 

         #example3 { 
             border: 2px solid black; 
             width:400px; /* screen width */ 
             height:150px; /* screen height */ 
             background: url(1.jpg); 
             background-repeat: no-repeat; 
             background-size: 300px 100px; 
         } 
      </style> 
   </head> 
     
   <body> 
      <h2>background-size: initial:</h2>
      <p> 背景图像以其原始大小显示。</p> 
      <div id="example1"></div> 
        
      <h2>background-size: contain:</h2> 
      <p>背景图像设置为auto。</p> 
      <div id="example2"></div> 
        
      <h2>background-size: 300px 100px:</h2> 
      <p> 背景图像设置为cover到指定区域。
      </p> 
      <div id="example3"></div> 
        
   </body> 
</html>

效果图:

9ab42d70c8481a1bd3330cd964a5cdf.png

以上就是如何使用CSS拉伸和缩放背景图像?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏