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

最新推荐文章于 2024-01-10 20:26:17 发布

weixin_45587319

最新推荐文章于 2024-01-10 20:26:17 发布

阅读量1.6k

点赞数 1

分类专栏： css 文章标签： css

原文链接：https://www.html.cn/qa/css3/10313.html

版权

css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

如何使用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>

效果图：
在这里插入图片描述
示例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>

效果图：
在这里插入图片描述
推荐阅读：

php服务器

php5下载

layui框架

weixin_45587319

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何使用CSS设置背景图像的大小？

如何使用CSS设置背景图像的大小？下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法，希望对大家有所帮助。CSS background-size属性可用于设置背景图像大小；使用height和width属性值来设置背景图像的大小。语法：background-size: width height;注意：●　如果省略第一个值，则图像采用其原始宽度。●　如果省略第二个值，则图像...
复制链接

扫一扫