如何使用CSS设置背景图像的大小?

如何使用CSS设置背景图像的大小?下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法,希望对大家有所帮助。

CSS background-size属性可用于设置背景图像大小;使用height和width属性值来设置背景图像的大小。

语法:

background-size: width height;

注意:

 ● 如果省略第一个值,则图像采用其原始宽度。

 ● 如果省略第二个值,则图像将采用其原始高度。

示例1:background-size设置width和height值来设置背景图像的大小。

<!DOCTYPE html>  
<html>  
    <head>  
        <title>设置背景图像的大小</title> 
        <style> 
            #myDiv1 { 
                height: 200px; 
                width: 400px; 
                background:url("1.jpg"); 
                background-size: 400px 200px; 
                  
            }
            #myDiv2 { 
                height: 337px; 
                width: 600px; 
                background:url("1.jpg"); 
                background-size: 600px 337px; 
                  
            } 
        </style> 
    </head> 
      
    <body>  
        <div id= "myDiv1"></div>
        <div id= "myDiv2"></div>
    </body>  
</html>

效果图:

1.jpg

示例2:将background-size设置为百分比

<!DOCTYPE html>  
<html>  
    <head>  
        <title>设置背景图像的大小</title>
        <style> 
            #myDiv1 { 
                height: 200px; 
                width: 400px; 
                background:url("1.jpg"); 
                background-size: 70%; 
                background-repeat: no-repeat;
                  
            }
            #myDiv2 { 
                height: 400px; 
                width: 600px; 
                background:url("1.jpg"); 
                background-size: 70%; 
                background-repeat: no-repeat;
                  
            } 
        </style> 
    </head> 
      
    <body>  
        <div id= "myDiv1"></div>
        <div id= "myDiv2"></div>
    </body>  
</html>

效果图:

2.jpg

以上就是如何使用CSS设置背景图像的大小?的详细内容,更多请关注html中文网其它相关文章!

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏

1/1