当前位置 知且行 大前端 css的backgroud系列 下一篇:

css的backgroud系列

背景图片

background-image 默认会将图片重复平铺占满整个父级元素

背景图片平铺

源码

可通过background-repeat设置平铺

  • background-repeat:no-repeat 不平铺

  • background-repeat:repeat-x 水平平铺

  • background-repeat:repeat-y 垂直平铺

平铺选项

源码

调整背景图片位置

background-position 可以移动背景图片,通过这个属性,可以将网站的多张小图片拼接成大图片,在不同位置引用时标识读取的位置即可,这样就能减少http请求

源码

background-position也可以用单词定位:

  • 在左右层面,我们用left、center、right来表示左、中、右

  • 在上下层面,我们用top、center、bottom来表示上、中、下

还可以用百分比表示:

backgrond-position:50% 0; 等价于:background-position:center top;

实例:

假设盒子现在宽度是600px,背景图的宽度是121px, 设置背影图片居中

  1. background-position:center top;

  2. background-position:50% 0;

  3. background-position:239.5px 0;

计算方式: 600 / 2 - 121 /2 = 239.5

图换文字

导航条放的是logo图片,html代码如下:

<h1>
	<img src="https://www.zhiqiexing.com/upload/images/logo.png" alt="">
</h1>

这种方式对于seo并不友好,我们应该加上h1标签,让搜索引擎识别标题

<h1>
    认真生活,持续成长
</h1>

再通过css设置背景图,以及将文字隐藏

h1 {
    backgroud: url(image/logo.png);
    text-indent: -999em;
}

或者将文字的行高加大,再设置overflow属性

h1 {
    width: 300px;
    height: 40px;
    margin: 0 auto;
    background-image: url(https://ws3.sinaimg.cn/large/006tNc79gy1fz19nurkzvj307d04uwf1.jpg);
    background-repeat: no-repeat;
    line-height: 400px;
    overflow: hidden;
}

源码

转载必须注明出处:https://www.zhiqiexing.com/26.html

关于我

我希望能成为一个认真、有趣、创造更多价值的人
关注微信
微信扫一扫关注我

微信扫一扫关注我

返回顶部