网页背景颜色怎么设置css,css怎么设置网页背景颜色
css怎么设置网页背景颜色
发布时间:2020-04-09 13:48:06
来源:亿速云
阅读:25
作者:小新
今天小编给大家分享的是css怎么设置网页背景颜色,很多人都不太了解,今天小编为了让大家更加了解css设置网页背景颜色的方法,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。
说到背景也就只有背景颜色和颜色图片,这两个我想大家一定都知道在里加入bgcolor="#808080"和background="URL"对吧,可是我这里将要介绍不是这样做的,而是用CSS样式来做的,虽说有些麻烦,可是整体配合还是非常不错的。
背景颜色 background-color
我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent(透明色)。例:body{background-color:yellow}
H1{background-color:#000000}
背景图片 background-image
背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成。但是在这里,我所指的并非是用这种方法,我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是none,而要加的话,就是在后面加上这个none就可以了。例:body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')
}
h3
{
background-image:url('none')
}
大家在使用里的背景图片时,一定常常遇到一些图片因为太小,而产生种种如图片的重复出现而破坏了整个页面的美感,想换成其它图片又不合适之类的麻烦情况吧。不过现在好了,大家只要用了以下的几个CSS里控制图片方法,那么你以后就不会再有此类的麻烦事发生了。
图片是否重复显示 background-repeat
有时候重复显示是需要的,可是有时候重复显示则是让人头痛的,现在这个可以很好的帮助你了,而且它还可以帮你控制图片重复的方式(水平方向重复、垂直方向重复以及两个方向都有重复),而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。
当然,它可以控制图片的重复,也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的,这个可不是默认的哟,默认的是重复显示背景图片(repeat)。例:body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat
}
定位图片显示位置 background-position
一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么background-position这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%),由两个值来设定,中间用空格来隔开。
它的主要的几个值有left center right和top center bottom,也可以用百分数值指定相对位置或用一个值来指定绝对位置,如50%表示的位置是在中心,而50px的水平值则表示图片距左上角区域水平移动50px单位;这里要特别指出的是,1当你设置值的时候只提供一个值,则相当于只指定水平位置,垂直自动设置为50%;2当你设置的值是负数的时候,则表示背景图片超出边界。例:body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-position:100px 10px
}
控制图片是否滚动 background-attachment
上面的两步可以帮你完成图像的定位,可是这样做好以后还不是完美的,因为如果你的页面有滚动条的时候,那么你这张背景图片就不会永远定位在那个位置了,如果想要图片永远定位在那个位置,就只有让这张图片随着页面的内容的滚动而滚动,这时background-attachment就可以帮你了你只要加入scroll(静止)和fixed(滚动)中的其中一个就可以了。
当然不是让你乱加的,毕竟scroll是默认的,也就是不让图片随页面的内容而滚动的。例:body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-attachment:fixed
}
好了,经过以上这番设置后,我相信你的背景一定会更美的,但是过多的代码往往可读性很差,容易让人产生错误,所以在这里我要告诉大家的就是可以把以上的代码全部加在一起使用,也就是说把以上相关的代码加到background中。
在把代码加到background中的时候要在每个值中间加上空格来隔开,而且不要把背景颜色的代码放在背景图片的URL后面,以免图片显示不出来。例:body
{
background:green url('file&:///C:/WINDOWS/BACKGRND.GIF')
fixed 100px 50px no-repeat
}
注意:如果用代码直接插入的话,那么一定要放下面这个代码的里后再放在之间才能正常显示出来!
关于css怎么设置网页背景颜色就分享到这里了,当然并不止以上和大家分析的办法,不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。
网页背景颜色怎么设置css,css怎么设置网页背景颜色相关推荐
- CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
- i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
- 徐志摩题要求:•使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段
徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...
- html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
- 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录 一.网页布局本质 二.盒子模型 三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法 一.网页布局本质 构建一个网页 , 首先 , 创建盒子模型 ...
- html怎么给段落设置背景色,css的(文字、背景、段落)样式
文字样式 属性: font-style:normal/ italic [设置文本为斜体] font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体] fo ...
- css样式如何设置边框,阴影,渐变等特效以及通过box-sizing属性设置盒子模型,背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...
- jsp页面 字体颜色 白色_CSS 文本字体颜色设置方法(CSS color)
一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使 ...
- css背景颜色占全部屏幕,css怎样让背景充满整个屏幕
炫酷时钟 body{ height: 100%;color: #51555c; background: url("./img/bg1.png") no-repeat; /* 背景图 ...
- CSS 文本字体颜色设置方法(CSS color)
转自:微点阅读 https://www.weidianyuedu.com 这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下 一.认识CSS 颜色(CSS c ...
最新文章
- 提高工作效率的 7 个 Vim 使用技巧!
- CSS中的margin的三种写法
- [9-1]磁盘基本知识、分区基本概念
- 遗传算法解决旅行商问题(TSP)
- Zabbix之监控Mysql性能
- 计算机中丢失boost,boost_system.dll
- Linux 创建网页服务,Linux使用Node.js建立访问静态网页的服务实例详解
- laravel引入自定义全局函数
- linuxshell如何实现进度条效果
- Intellij IDEA 2019 最新优化配置
- Windows下安装Tensorflow-Slim(待续)
- 让用户无法在微信中举报的代码
- PDF免费转PPT值得您收藏使用的网站
- 空指针异常是什么意思
- OPENGL ES 2.0 知识串讲(2)――EGL详解
- 语音(识别)处理教程
- 百度安卓开发一二面面经
- ubuntu 网速测试方法
- html中加水印,html中实现添加水印的功能
- pear php5.6,一键安装php5.6.40脚本
热门文章
- 在哪里设置自动锁定计算机,教你电脑锁屏怎么设置,让电脑自动锁屏
- 如何登录锐捷设备(业务软件篇)
- nginx-1.13.7 按照centos8 报错记录
- android系统密码设置功能,手机锁屏设置!安卓手机锁屏密码设置技巧?
- Alibaba Cloud Linux 等保 2.0 三级版操作系统详解
- 图像预处理——对数变换
- Hook Android q 剪贴板限制,AndroidQ(10)获取剪切板内容适配
- PMP 风险应对措施 :规避和减轻的区别
- c语言编程中u16啥意思,STM32中数据类型定义 U8 U16 U32解释说明
- 电力系统中的Kron简化(Kron Reduction)