HTML背景

news/2024/11/23 5:41:45/

1: background-color设置背景色

2、 设置背景图片

语法:background-image:url(./img) ;

_可以同时设置背景色,火绒背景图片,如果同时设置,背景色是在背景图下面

--图片在元素中的位置

如果背景图片大于元素,默认是显示图片的左上角

如果一样大,则正常全部显示

                  如果图片小于元素,则默认情况下,背景图片会平铺充满元素

 background-image:url() ;

3、  background-repeat: no-repeat;设置背景图片重复的方式

            可选值:

              repeat  默认值  双方向重复

              no-repeat  不重复,有多大就显示多大

              repeat-x  水平方向重复

              repea-y  垂直方向重复

 background-repeat: no-repeat;

background-position: ;设置图片在元素中的位置

                   默认在元素的左上角

                   可选值:

                    1、  top  right  left   bottom  center中两个值

                      如果只写一个值,第二个值默认是center

                    2、也可以直接指定两个偏移量

                         第一个值,是水平的偏移量   可正(向右)  可负(向左)

                         第二个值,是垂直的偏移量   可正(向下)  可负(向上)

background-position: center;

5、 background-clip: ; 设置背景的范围

            可选值:

              border-box  默认值,背景色会出现在边框下面

              padding-box  背景就不会出现边框下,出现在内容区和内边距区

              content-box   背景图出现在内容区下面

background-clip: content-box;

6、 background-origin: ; 设置背景图片偏移量原点

               一般情况下,配合 background-position使用

            可选值:

              border-box  从边框开始计算偏移量

              padding-box  默认值,从内边距开始计算

              content-box  从内容区开始计算偏移量

background-origin:content-box ;

7、 background-size: ; 设置背景图片的大小

               1、参数:

                   第一个:宽度

                   第二个:高度

                   如果只写一个,第二个值,为auto

                2、cover  图片的比例不变, 将元素充满

                  contain 图片比例不变,将元素完整显示

background-size: cover;

background简写方式

        -这个属性可同时设置背景相关的所有样式

          没有顺序要求,如果不写,就会使用默认值

        -background-size 必须要写在background-position后面


http://www.ppmy.cn/news/439309.html

相关文章

按头安利!好看又实用的中国风 古风高清背景图片素材看这里!

想必大家都在为找中国风 古风高清背景图片而头疼吧,今天小编都为大家整理好咯,超多的中国风 古风高清背景图片资源,大家喜欢的可以先行收藏哈,之后会持续更新哒~ 因为小编的工作原因,经常会使用到中国风 古风高清背景…

【0210】frontend接收到Backend进程的认证请求报文后,如何作出回应 (12)

文章目录 1. 校验消息体(message body)完整度2. 初始化auth_req_received3. 获取请求认证的类型4. 处理身份认证报文的额外数据(extra data)5. 前端完成身份验证交互相关文章: 【0206】Backend 向客户端发送身份认证请求报文(Client authentication) (10 - 1) 【0207】…

windows和android平板,平板的系统,到底该选Windows还是安卓?

原标题:平板的系统,到底该选Windows还是安卓? 2012年微软下定决心推出自己的平板设备surface,最初的surface RT并未搭载完整的windows而饱受诟病,但另一支surface pro经过了4代的演变,已经成为了移动办公、…

平板win10 android哪个耗电,买平板电脑时,应该选win10还是安卓系统?

原标题:买平板电脑时,应该选win10还是安卓系统? 哈喽小伙伴们大家好,我是节奏君~ 科技不断进步,大家对科技产品的要求也越来越高, 今天,我们就一起来讨论一下买平板电脑选系统的事~ 很多小伙伴都…

在Qgis中使用QMetaTiles插件进行XYZ瓦片离线下载方法

目录 前言 一、Qgis插件库 1、插件库简介 2、QMetaTiles介绍 二、QMetaTiles插件安装 1、在线安装 2、离线安装 三、瓦片下载 1、打开QmeaTiles插件 2、Leaflet加载下载的瓦片 总结 前言 电子地图是地图类应用的基石,作为整个系统的基础。其它的图层要素都构…

SpringCloud Alibaba-Seata分布式事务

SpringCloud Alibaba-Seata 1 常用事务解决方案模型1.1 DTP模型1.2 2PC1.3 3PC1.4 TCC 2 Seata2.1 Seata术语2.1 Seata AT模式2.1.1 AT模式及工作流程2.1.2 Seata-Server安装2.1.3 集成springcloud-alibaba 4.2 Seata TCC模式 3 Seata注册中心3.1 服务端注册中心配置3.2 客户端…

win7 改装linux系统教程,linux系统改装win7

正版Windows7系统光驱安装方法: 1.启动计算机,在Linux系统尚未启动前速度按下F12; 2.先放入安装光盘,使用键盘上的“↓”键,将光标移动到带有“CD-ROM”的选项上,按回车键(Enter)确定; 3.出现“…

声卡驱动win7安装失败解决方法

有些朋友遇到了声卡驱动win7安装失败的情况,这种情况下我们应该如何解决这个问题呢?大家稍安勿躁,小编会帮助大家解决这个问题的,下面就给大家带来声卡驱动win7安装失败解决方法吧。 win7 64位系统安装声卡失败 解决驱动不能安装办法&#x…