整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS背景属性实战,灵活使用background属性

CSS背景属性实战,灵活使用background属性,原来如此简单

望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。

【技术等级】初级

【承接文章】《在CSS中使用background属性,调整页面和块背景,系统讲解背景属性》

本文承接上一篇文章中所讲到的background属性,通过几个简单实用的小例子,学些背景效果的各种实现方式。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。

所承接的上一篇文章中,主要介绍了下列背景属性:

  • background-color

  • background-image

  • background-repeat

  • background-position

  • background-attachment

本文在上一篇文章的基础上,复习和巩固这五个属性的具体用法。

例1:为网页背景制作水印效果。

首先制作一张水印效果的图片。该图片的内容透明度较低,图片较小。本例中制作了一个宽度为290像素,高度为205像素的图片。该图片的文件名为back01.jpg。图片内容为两行文本,颜色为黑色,同时调整了两行文本的不透明度。图片效果如下所示,大家也可以根据自己喜好利用Photoshop随意制作。

例1素材图片 back01.jpg

为页面添加如下代码在<head></head>标记对中:

<style type="text/css">

body{background-image:url("back01.jpg");}

</style>

由于图片本身的尺寸远远小于整个页面的大小,所以在默认情况下,该图片会在页面中平铺以产生下列背景效果。

例1最终效果图

例2、为网页背景制作顶部花边效果。

首先制作一张花边图片。该图片包含一个花边图样,图片较小。本例中制作了一个宽度为172像素,高度为36像素的图片。该图片的文件名为back02.jpg。图片效果为:

例2 素材图 back02.jpg

为页面添加如下代码在<head></head>标记对中:

<style type="text/css">

body{

background-image:url("back02.jpg");

background-repeat:repeat-x;

}

</style>

由于图片本身的尺寸远远小于整个页面的大小,同时又设置为水平方向平铺,所以该图片会在页面中产生下列背景效果。

例2最终效果图

例3、为网页背景制作渐变背景。

首先制作一张渐变图片。该图片包含自上而下的蓝白渐变。本例中制作了一个宽度为1像素,高度为200像素的图片。该图片的文件名为back03.jpg。图片效果为:

例3 素材图片 back03.jpg

为页面添加如下代码在<head></head>标记对中:

<style type="text/css">

body{

background-image:url("back03.jpg");

background-repeat:repeat-x;

}

</style>

由于图片的宽度远远小于整个页面的宽度,同时又设置了水平方向平铺,所以该图片该图片会在页面中产生下列背景效果。

同时,由于页面本身的颜色默认为白色,因此,该渐变色下方的白色与页面背景颜色融合。因此,当页面过长产生垂直滚动条后,不会影响背景颜色的自然过渡。

那么,若需要给页面背景添加自上而下的白蓝渐变,应该如何设置呢?渐变色下方的蓝色与页面背景无法融合,会产生明显的蓝白边界。该问题的解决方法是将页面的背景颜色由默认的白色调整为渐变色下方的颜色即可。代码如下:

<style type="text/css">

body{

background-image:url("back03.jpg");

background-repeat:repeat-x;

background-color:# 8181fc; //渐变色下方的蓝色

}

</style>

例4:设置网页的背景图片位于页面中心,且不随垂直滚动条的滚动而滚动。

首先制作一张可以居中放置的图片。本例中制作了一个宽度为500像素,高度为500像素的图片。该图片的文件名为back04.jpg。图片效果为:

例4 素材图片 back04.jpg

实现该效果的代码如下所示。

<style type="text/css">

body{

background-image:url("back04.jpg"); //加载图片

background-repeat:no-repeat; //设置不平铺

background-position:center center; //位置在页面中心

background-attachment:fixed; //页面滚动时图片固定

}

</style>

文章预告

下一篇文章中,小海老师会带领大家学习CSS中功能强大的图片精灵技术(CSS Sprite)。对于渴望在前端开发道路上前进的你一定不能错过!

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章,逐步学到一定的知识,甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验,每写一篇时我都尽量把握好措辞,用简单易懂的语言描述,同时精心设计版面,让版面更加丰富,激发阅读兴趣。所以,每一篇文章可能篇幅不长,但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我系统的归纳过的。

关注“小海前端”,我会继续为大家奉上更加深入的前端开发文章,也希望更多的初学者跟着学下去,我们共同将前端开发的路努力坚持的走下去。

色显示百度首页

今天早上醒来一看各大网站,为表示新冠肺炎疫情死难者的哀悼,各大网站均将页面变为灰色显示,显示的极为庄重肃穆。本文主要介绍常用网页页面快速变灰色的方法。


CSS样式Filter属性

对于网页而言,页面色彩、布局等主要受到层叠样式文件CSS控制,网站页面整体色彩的改变可以通过CSS进行整体的控制。在CSS中可以通过filter滤镜属性实现对网页元素进行图像、背景及素材的渲染。

Filter调整测试Demo

如上图所示,通过设置Filter的属性取值,实现对颜色色彩的控制。主要属性说明如下:

1、filter: blur()方法

该方法主要用于实现对图像设置高斯模块,及屏幕上的像素融合程度即模糊程度。其参数需要以像素值形式进行提供。参数值越大模糊程度越高。示例如下图:

网页中显示的图标

在未使用filter属性未设置时,显示的原始图片效果如上图所示。我们可以进一步对页面添加style样式调整filter blur参数值,可实现页面的模糊程度。如blur参数取值为2个像素,效果如下:

blur参数取值为2显示效果

2、filter: grayscale()方法

该方法是用于实现页面变灰的主要方法,主要用于设置页面显示的灰度。参数值需要以百分比形式进行提供,0%表示未进行灰度调整,100%表示将页面完全转化为灰度。我们还是以图标为例,对其进行灰度设置进行说明。当灰度取值设置为20%时效果如下图1所示,当灰度值设置为100%时效果如图2所示:

图一:灰度20%设置显示效果

图二:灰度100%设置图片显示效果

使用filter提供的 grayscale()方法对页面进行灰度设置实现效果描述如上图,我们可以快速实现将页面快速变灰。目前浏览器的内核型号较多,对CSS的支持与解析情况不相同,在进行页面灰度处理时需要考虑到用户终端浏览器的类型,需要进行CSS样式的兼容性设置。实现基本代码描述如下:

-webkit-filter: grayscale(100%); 
//(Apple Safari内核)
-moz-filter: grayscale(100%); 
//(Firefox浏览器)
-ms-filter: grayscale(100%); 
//(Internet Explorer(IE)浏览器)
-o-filter: grayscale(100%); 
//(Opera浏览器)

网页变灰实例

在明确网页变灰所需使用滤镜效果之后,我们可以使用其属性进行页面变灰效果。以下给出本人编写的一个简单Demo进行变灰测试,原始页面效果如下:

测试原始页面

按照编码要求,我们在该页面头部<head>编写样式文件,实现变灰处理,所添加代码描述如下:

变灰实现代码

在页面添加变灰代码之后,我们可以看出明显的变灰效果,效果描述如下:

页面变灰实现效果


本文给出了网页页面变灰的实现简单方法,作为网页设计人员、前端开发人员应当能够掌握基本使用方法,实现页面的快速改变。

改网页中被选中文字样式(如背景颜色)的方法

现在大家在浏览器网站的时候,会发现越来越多的网站出现了这么一个效果,就是鼠标选中页面中文字的时候,被选中的文字体现出来的不是传统的蓝底白字还是其他颜色,如拉勾网中文字被选中的效果:

说实话,这个效果实际的用处并不是太大,有没有均不会对网站的用户体验造成太大影响,但如果合理利用,将被选中文字的样式(如背景颜色等)设置成和网站主色调相似的颜色,会显得页面更舒服一些。好吧,废话不多说,怎么实现呢?很简单,利用css3中提供的::selection伪类选择器即可。

演示代码如下:

<style>

h1::selection{

background: greyellowgreenen;

color: white;

}

h1::-moz-selection{

background: yellowgreen;

color: white;

}

</style>

<h1>后盾网 人人做后盾(效果分享:孙琪峥)</h1>

实际效果演示请猛戳这里:效果传送门

注意:经实际测试,ie、谷歌、斯巴达等浏览器就能直接识别,火狐浏览器需要加-moz-的专属前缀。

【本文来自 孙琪峥博客 http://www.sunqizheng.com/,想获取更好的页面浏览效果或者有任何问题请进入博客,同时也可在博主评论区进行留言,让博主为大家答疑解惑~】