文档章节

DIV+CSS中的滤镜和模糊

任平生7887
 任平生7887
发布于 2017/08/02 22:19
字数 997
阅读 27
收藏 0

div+css中,经常会用到divspan

当内容比较多的时候,会用到div
当内容比较少的时候,会用到span

来看下面的代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DIV+CSS</title>
</head>
<body>
<span style="color:green;font-size:30px;">栏目一</span><br>
<span style="color:orange;font-size:16px;">栏目二</span><br>
<span style="color:blue;font-size:16px;font-style:italic;">栏目三</span><br>
<span style="color:green;font-size:16px;font-weight:bold;">栏目四</span><br>
<span style="color:navy;font-size:16px;font-weight:bold;">栏目五</span><br>
</body>
</html>

执行后的效果如下:

在这里设置了字体的粗细.

设置段落字体的粗细的属性:

font-weigth属性设置文本的粗细.
使用bold关键字可以将文本设置为粗体.
关键字100~900为字体指定了9级加粗度,如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别.
如果将元素的加粗设置为bolder,浏览器会设置比所继承值更粗的一个字体加粗.
与此相反,关键词lighter会导致浏览器将加粗度下移而不是上移.

p.normal{font-weight:normal;}
p.thick{font-weight:bold;}
p.thicker{font-weight:900}

看到上面的代码,是不是感觉很low.

假如现在想把上面的五行字都换成跟第一行字的效果一样,有什么好的办法呢???

来看下面的这段代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DIV+CSS</title>
    <style type="text/css">
        .style1{
            color:green;
            font-size:30px;
        }
    </style>
</head>
<body>
<span class="style1">栏目一</span><br>
<span class="style1">栏目二</span><br>
<span class="style1">栏目三</span><br>
<span class="style1">栏目四</span><br>
<span class="style1">栏目五</span><br>
</body>
</html>

刷新浏览器,效果如下:

这样想一次性修改五行的样式的话,就可以相接修改style里面的代码就可以了.

比如,现在想把五行的字体都变成斜体的话,就可以加上下面的属性就可以了.

font-style:italic;

修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DIV+CSS</title>
    <style type="text/css">
        .style1{
            color:green;
            font-size:30px;
            font-style:italic;
        }
    </style>
</head>
<body>
<span class="style1">栏目一</span><br>
<span class="style1">栏目二</span><br>
<span class="style1">栏目三</span><br>
<span class="style1">栏目四</span><br>
<span class="style1">栏目五</span><br>
</body>
</html>

刷新浏览器后得到的效果如下:

可以看到css可以统一网站的风格.

现在想把一个网站的所有图片都为成黑白色或者模糊,这个要怎么实现呢??

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS的滤镜效果</title>
    <style type="text/css">
        a:link img {filter: grayscale(100%);}
        a:hover img {filter: grayscale(10%);}
    </style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>

当图片正常显示,鼠标没有放在图片上的时候,图片显示的是灰色的;

当鼠标放置在图片上的时候,图片就变成正常颜色的了.现在把鼠标放在第一张图片上,显示的效果如下:

再把鼠标移动到第四张图片上,显示的效果如下:

这就是滤镜的效果.

再来看看使用css达到图片模糊的效果. 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS的滤镜效果</title>
    <style type="text/css">
        a:link img {filter:blur(10px);}
        a:hover img {filter:blur(0px);}
    </style>
</head>
<body>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
<a href="#"><img width="200px" src="1.jpg"></a>
<a href="#"><img width="200px" src="2.jpg"></a>
</body>
</html>

现在图片正常显示,鼠标暂时没有放置到任何一张图片上,效果如下:

把鼠标放在第一张图片上,显示的效果如下:

再把鼠标放在第四张图片上,显示的效果如下:

这就达到想要的图片模糊的效果了.

© 著作权归作者所有

任平生7887
粉丝 2
博文 78
码字总数 112264
作品 0
海淀
私信 提问
SVG实现动态模糊动画效果

本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 今天我们将向大家展示如何制作SVG动态模糊效果,并将其应用于HTML元素的常规JS或CSS动画。 动态模糊...

码农网
2017/11/04
0
0
css鼠标移到图片上由黑白变彩色

css鼠标移到图片上由黑白变彩色(附:CSS滤镜) <STYLE type=text/css> A IMG { FILTER: gray;} <!-- 通过滤镜让图片以灰色显示 --> A:hover IMG {FILTER:} <!-- 通过滤镜恢复图片为彩色 --......

lark_33
2012/09/13
0
0
实时图像处理和机器学习库 - cv4j

The target is to set up a high quality and real-time image process and machine learning library which is implemented in pure java. The framework can run application on java desk......

匿名
2017/06/13
394
0
模拟油画和铅笔画的滤镜效果

油画效果 先上未经任何处理的原图 原图.png 然后使用油画风格的滤镜OilPaintFilter看看效果,OilPaintFilter的使用方式就一句话:) 油画效果.png OilPaintFilter在处理人物图片和风景图片时...

Tony沈哲
2017/05/12
0
0
你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。 OK,...

chokcoco
2017/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spark内置图像数据源初探

概述 在Apache Spark 2.4中引入了一个新的内置数据源, 图像数据源.用户可以通过DataFrame API加载指定目录的中图像文件,生成一个DataFrame对象.通过该DataFrame对象,用户可以对图像数据进行简...

阿里云官方博客
29分钟前
5
0
掌握Composer

这一次,真正掌握composer composer是现代PHP的基石 现代高级编程语言,依赖管理工具是必不可少的。Java有Maven,Python有pip,Nodejs有npm, 而在composer出现之前,PHP只有被广为诟病的Pea...

城市之雾
35分钟前
3
0
Shell中的函数、数组、告警系统

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.20 告警系统主脚本 20.21 告警系统配置文件 20.22 告警系统监控项目 20.23/20.24/20.25 告警系统邮件引擎 20.26 ...

tobej
36分钟前
3
0
Win7系统安装hadoop

环境准备 安装JDK1.8,配置JAVA_HOME 下载hadoop_3.1.2,配置HADOOP_HOME 配置HDFS 修改hadoop-env.cmd 增加 set HADOOP_PREFIX=%HADOOP_HOME%set HADOOP_CONF_DIR=%HADOOP_PREFIX%\etc\ha......

铲平王
39分钟前
2
0
IT兄弟连 Java语法教程 Java语言的其他特性

Java语言中除了非常重要的跨平台特性外,还有如下几个关键特性: ● 语法简单易学 Java语言的语法简单明了,容易掌握,而且是纯面向对象(OOP)的语言,Java语言的简单性主要体现在以下几个方...

老码农的一亩三分地
52分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部