欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3关于background-size属性的详细介绍

程序员文章站 2022-04-13 14:53:11
...
我们知道,在CSS3里有一项很重要的属性,bachground-size属性,它的作用就是定义背景图片的大小,值有5种,auto , 像素值 ,百分比 , cover , contain。今天就教大家如何使用bachground-size属性。

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.背景图片本身大小—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中transform属性的使用教程

Css3中的border-image属性详细介绍

前端项目里里定位几种方式

以上就是CSS3关于background-size属性的详细介绍的详细内容,更多请关注其它相关文章!