html设置背景图片颜色,CSS设置背景图片及背景颜色示例-程序员宅基地

技术标签: html设置背景图片颜色  

1.设置背景颜色

background-color是CSS中的背景颜色属性,这个属性用于为HTML元素设定背景颜色,可以设置整个网页的背景颜色,也可以设置网页中某部分元素的背景颜色,比如表格背景颜色、层背景颜色等等。

示例1:

这段代码设置整个网页的背景颜色为蓝色#0080FF

2.设置背景图片

(1)background-image是CSS中的背景图片属性,这个属性用于为HTML元素设定背景图片,可以设置整个网页的背景图片,也可以设置网页中某部分元素的背景图片,比如表格背景图片、层背景图片等等。

示例2:

这段代码设置整个网页的背景图片,网页和图片可以存放在不同的网站空间内,背景图片既横向重复又竖向重复。

示例3:

如果网页和图片存放在同一个网站空间内,图片位于images目录下,示例1的代码也可以用图片的相对路径写法:

(2)background-repeat是CSS中的背景重复属性,这个属性通常与background-image一起使用,控制背景图片的重复显示方式,属性值包括:

·

repeat-x 背景图片横向重复

· repeat-y 背景图片竖向重复

· no-repeat 背景图片不重复

示例4:

这段代码设置网页的背景图片,背景图片仅竖向重复。

示例5:

这段代码设置网页的背景图片,背景图片仅横向重复。

示例6:

这段代码设置网页的背景图片,背景图片不重复。

(3)background-attachment是CSS中的背景附着属性,这个属性通常与background-image一起使用,控制背景图片是跟随网页内容滚动,还是固定不动,属性值包括:

·

scroll(缺省值)

· fixed

示例7:

这段代码设置网页的背景图片,背景图片不重复,且不随网页内容滚动。

(4)background-attachment是CSS中的背景位置属性,这个属性通常与background-image一起使用,控制背景图片的最初位置。

示例8:

这段代码设置网页的背景图片,背景图片不重复,随网页内容滚动,背景图片的初始位置距网页最左边50px,距网页最顶端30px。

(4)background是CSS中的背景属性,这个属性是个综合属性,可以把以上种种单独定义的背景属性合并在一起,简化代码,不同背景属性之间用空格间隔。

示例9:

这段代码设置网页的背景颜色为蓝色#0080FF,背景图片不重复,且不随网页内容滚动,背景图片的初始位置距网页最左边50px,距网页最顶端30px。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34748612/article/details/117833969

智能推荐

强化学习(reinforcement learning)教程_强化学习教程-程序员宅基地

文章浏览阅读3.4w次,点赞2次,收藏29次。前一阵研究强化学习,发现中文的资料非常少,实例就更少。于是翻译一篇q学习算法的教程,供需要的人学习。原文链接:http://mnemstudio.org/path-finding-q-learning-tutorial.htm正文:Q学习算法是一种用来解决马尔可夫决策过程中最优化问题的方法。Q学习算法最大的特点是它具有选择瞬时奖励和延迟奖励的能力。在每一步中,agent通过观察状态_强化学习教程

SpringBoot+Vue校园二手书交易平台(源码+论文)_基于vue+springboot的校园二手商品交易网站论文-程序员宅基地

文章浏览阅读81次。后端:Java+SpringBoot前端:Vue数据库:MySQL开发软件:Eclipse、MyEclipse、IDEA都可以运行。_基于vue+springboot的校园二手商品交易网站论文

Chrome 开发者工具各种骚技巧-程序员宅基地

文章浏览阅读231次。对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。今天,大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。网站是:umaar.com/dev-tip...

【jeecg-boot】jeecg-boot的一些功能扩展:-程序员宅基地

文章浏览阅读2k次。【jeecg-boot】jeecg-boot的一些功能扩展:_jeecg-boot

gitlab上克隆远程分支到本地(报错-error: RPC failed; curl 18 transfer closed with outstanding read data remaining)_gitlab 18: transfer closed with outstanding read d-程序员宅基地

文章浏览阅读2.7k次。首先确保你的电脑有安装git环境,本人使用的是windows下的git环境。双击桌面图标 的Git Bash 打开窗口修改配置git config --global user.namegit config --global user.email如:git config --global user.name "muzidigbig"git config --glo..._gitlab 18: transfer closed with outstanding read data remaining

springboot+Shiro快速入门:简洁版(快速搭建示例)_springboot+shiro快速入门:简洁版(快速搭建示例)-程序员宅基地

文章浏览阅读311次,点赞2次,收藏2次。springboot整合shiro快速入门简洁版_springboot+shiro快速入门:简洁版(快速搭建示例)

随便推点

MATLAB db4小波分解与重构,语音降噪-程序员宅基地

文章浏览阅读4.4k次,点赞2次,收藏23次。小波变换3级分解Mallat图:将带噪语音作为输入信号进行逐级DWT小波分解,并将分解出的低频成分cA3cA_3cA3​与强制置0后的高频成分cD3cD_3cD3​,cD2cD_2cD2​,cD1cD_1cD1​进行小波重构。Demo:clc,clear[x,Fs]= audioread('MUsic_Test.wav');snr = 20; %设定信噪比,单位dbnoise = randn(size(x)); % 用randn函数产生高斯白噪声Nx = length(x_db4小波

安装和配置SNMP(windows10和Linux)--附SNMP客户端工具_snmp工具-程序员宅基地

文章浏览阅读8.3k次,点赞5次,收藏34次。首先需要安装 snmp ,使用下面的命令进行安装安装完毕之后,使用下面的命令查看是否安装成功当命令行显示如图即为安装成功。_snmp工具

如何正确的敲键盘(打字习惯改正)_怎么敲键盘-程序员宅基地

文章浏览阅读6.4k次,点赞5次,收藏40次。练习打字的官网:http://dazi.kukuw.com/关于打字的详细介绍:一个过来人的打字指法纠正之路_怎么敲键盘

网络安全解决方案-程序员宅基地

文章浏览阅读9.6k次,点赞3次,收藏68次。一,网络安全体系结构网络安全体系结构是对网络信息安全基本问题的应对措施的集合,通常由保护,检测,响应和恢复等手段构成。1,网络信息安全的基本问题研究信息安全的困难在于:边界模糊数据安全与平台安全相交叉;存储安全与传输安全相制约;网络安全,应用安全与系统安全共存;集中的安全模式与分权制约安全模式相互竞争等。评估困难安全结构非常复杂,网络层,系统层,应用层的安全设备,安全协议和安全程序构成一个有机的整体,加上安全机制与人的互动性,网络的动态运行带来的易变性,使得评价网络安全性成为极_网络安全解决方案

QGIS在Windows下的编译——QGIS3.28.15 + Qt5.15.3 +CMake3.28.0 + VS2022 ---64位版本_qgis windows编译-程序员宅基地

文章浏览阅读1.2k次,点赞22次,收藏29次。QGIS在Windows下的编译——QGIS3.28.15 + Qt5.15.3 +CMake3.28.0 + VS2022 ---64位版本_qgis windows编译

BAAF-Net源码阅读_baafnet-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏3次。BAAF-Net代码是基于RandLANet编写的,所以在数据预处理和训练策略是基本是一致的,这里我们只介绍一下BAAF-Net的网络结构。_baafnet

推荐文章

热门文章

相关标签