您现在的位置是: 首页 » 网页代码 » 如何使用CSS拉伸和缩放背景图像?
网页代码

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

网站优化小编2020年1月10日 82人已围观

想要使用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>

效果图:

网站运营中栏目排名优化技巧

示例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>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:440天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4966 条
  • 文章评论:3311 条
  • 微信公众号:扫描二维码,关注我们