html设置背景图片高度,如何使用CSS设置背景图像的大小?

您所在的位置:网站首页 照片高度宽度像素设置 html设置背景图片高度,如何使用CSS设置背景图像的大小?

html设置背景图片高度,如何使用CSS设置背景图像的大小?

2024-06-13 01:25| 来源: 网络整理| 查看: 265

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

0f37c1f6ebd9

image

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

语法:

background-size: width height;

注意:

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

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

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

设置背景图像的大小

#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;

}

效果图:

0f37c1f6ebd9

1.jpg

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

设置背景图像的大小

#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;

}

效果图:

0f37c1f6ebd9

2.jpg



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3