人亦已歌 发表于 2023-1-31 21:13:26

CSS核心(十五)设置背景尺寸大小 background-size 属性


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景尺寸大小 background-size 属性</title>
</head>

<body>
<style>
      div{
                width:500px;
                height:500px;
                /* 调整背景图的大小:
                background-size:第一个值是宽度,第二个值是高度
                background-size:200px 200px; 表示宽200像素,高200像素
                支持百分比
                background-size:100% 200px; 表示保持横向拉伸填满盒子,图片的高度调整为200像素*/
                background-size:100% 200px;
                background-color:#abcdef;
                background-image:url(./img/5.jpg);
                background-repeat:no-repeat;
      }
</style>
<div>
      背景background相关属性
</div>
</body>
</html>




以上代码中,我们将图片尺寸设置为宽拉伸填满盒子,高为200像素,其它组合同理,大家可以自己测试一下。

显示效果如下:


飞谦 发表于 2023-2-16 17:02:04

好东西啊

无心人 发表于 2023-2-23 06:12:09

楼主,如果真的希望自己不要那么飘飘然,我倒可以批评一两句哦:如果真的是高级程序员的水平,那么也应该有点耐心与毅力..不要遇到一道失败的题,就放弃了其他的.

沙和尚 发表于 2023-2-27 08:49:47

^本人从这篇文章中看到了自己的水平,文中的作者大哥已经是一个很棒的程序员了,但是他从社会中体会到了真正的高手是怎么样的,加油写的非常精劈,非常支持这种观点

coralwolf 发表于 2023-3-4 15:13:56

不错不错

cyber211 发表于 2023-3-11 01:23:41

汗,看了之后我流汗了.CPU是为用户服务的,不是为程序员服务的经典!

jqx 发表于 2023-3-17 01:16:18

说得很精彩!~~~~~~~~~

娟娟 发表于 2023-3-21 23:01:23

谢谢你说的东西,相信我们一定也能像你一样成功~~~~~~~~~~~~

blueflame 发表于 2023-3-26 01:42:43

好!

itdream 发表于 2023-3-30 06:23:21

哎 ~~~~~~~~~~默默无问两眼泪啊~~太好了 , 这篇文章我一定要收藏,(楼主不介意吧)他将是将是我踏上成功的催化剂
页: [1] 2 3 4
查看完整版本: CSS核心(十五)设置背景尺寸大小 background-size 属性