网站建设资讯

NEWS

网站建设资讯

怎么利用css来设置文本的背景颜色

小编给大家分享一下怎么利用css来设置文本的背景颜色,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

10年的商洛网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整商洛建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“商洛网站设计”,“商洛网站推广”以来,每个客户项目都认真落实执行。

首先我们先来看看这个代码:

background-color:属性设置元素的背景颜色(值有三种:color_name:(英文颜色名)\hex_name:#000000(十六进制字符颜色)\rgb_name:255.0.0(不常用))

来看个关于文本背景的实例:





创新互联

	

	

这里是创新互联,很多精品编程教程等着你学习

设置这个的效果应该很明显,我们来看在谷歌浏览器中显示的效果:

怎么利用css来设置文本的背景颜色

看图,我们很明显看到,网页显示的部分都变红了。这是因为我在body中设置了css的背景样式,使得整个body主体部分都是红色,这样是不是很明显。

我们再来看看如何设置文本背景效果吧:(这还有代码)




这里是创新互联,很多精品编程教程等着你学习

这里是创新互联,很多精品编程教程等着你学习

这里是PHP中文 网,很多精品编程教程等着你学习

我们把上图的给body加的样式现在给了p标签,这样会发生什么呢,一起来看下效果:

怎么利用css来设置文本的背景颜色

因为p标签是块级元素,所以我们这的显示效果就是一段话就是占据一整行。我们在来试试别的行内标签的元素看看情况,同样的代码,不一样的标签,我们来看看:


这里是创新互联,很多精品编程教程等着你学习

这里是创新互联,很多精品编程教程等着你学习

这是把上图中的第一个p标签改为span标签了,我们来对比下看看:

怎么利用css来设置文本的背景颜色

我把span的css样式改为蓝色,就是我们现在看到的效果了,一个是行内标签,是文本到哪背景就到哪的,另一个是块级元素,不管你有没有到一行,背景都是一行显示。(想看更多css样式相关的知识,就到创新互联css学习手册栏目学习)

说了这么多来设计背景颜色,现在我们说说背景图片的代码吧:

  • backgroud-image:URL(图片地址)为元素设置背景图像

  • backgroud-repeat:设置是否或者如何重复背景图像(repeat、repeat-x(沿着水平方向重复)\repeat-y(垂直平铺)\no-repeat(不平铺))

  • backgroud-position:设置背景图像的起始位置(top,bottom,left,right,center,%\px)

已经把我自己对这些个属性的了解已经写在上面了。大家看着介绍应该就能知道用法了,但是我们还是要演示一下给大家看的,我们就一起演示了:



这里是创新互联,很多精品编程教程等着你学习

因为没有图片,就不发效果了,大家自己设置就行了,上面有正常使用的值都在里面。

看完了这篇文章,相信你对怎么利用css来设置文本的背景颜色有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前题目:怎么利用css来设置文本的背景颜色
转载来源:http://njwzjz.com/article/pcheog.html