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关于background-size属性的详细介绍的详细内容,更多请关注其它相关文章!
上一篇: JavaScript重要知识点总结1
推荐阅读