欢迎光临
我们一直在努力

CSS3中background-size属性怎么用

小编给大家分享一下CSS3中background-size属性怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

bachground-size属性就是定义背景图片的大小,其值有:auto , 像素值 ,百分比 , cover , contain

background-size:auto,默认值,以图片自身大小填充元素,根据元素大小来调节自身比例,不会让图片变形。

CSS3关于background-size属性

1.<!DOCTYPE html><html><head>

<meta charset="utf-8">

<title>background-size属性</title>

<style type="text/css">

div{

width:300px;

height:150px;

border:1px solid black;

background:url("photo.jpg") no-repeat;

}

</style></head><body>

<div></div></body></html>

2.背景图片本身大小&mdash;width:200px height:133px ,上述代码的效果图如下:

像素值,比如 30px 50px,分别表示width height

CSS3关于background-size属性

<!DOCTYPE html><html><head>

<meta charset="utf-8">

<title>background-size属性</title>

<style type="text/css">

div{

width:300px;

height:150px;

border:1px solid black;

background:url("photo.jpg") no-repeat;

background-size:250px 100px;

}

</style></head><body>

<div></div></body></html>

以上是“CSS3中background-size属性怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注云搜网行业资讯频道!

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。