CSS3图像和背景的学习

学习来源

网页图像

图像大小，<img>标签中width和height属性控制图像大小。

   .pic_news{width:500px;}.pic_news h2{font-family:"隶书";font-size:24px;text-align:center;}.pic_news img{float:left;margin-right:16px;margin-bottom:16px;height:250px;}.pic_news p{text-indent:2em;}

   <div class="pic_news"><h2>石家庄铁道大学</h2><p><img src="data:images/1.jpg" alt=""/></p><p>石家庄铁道大学前身是中国人民解放军铁道兵工程学院，创建于1950年，系当时全军重点院校</p><p>经过69年的风雨兼程和历史积淀，石家庄铁道大学汇集军队、部委和地方院校优势于一身，形成了“慎思明辨、知行合一”的校训和“军魂永驻、校企结合、育艰苦创业人 ”的鲜明办学特色，在国家经济建设主战场谱写了一页页辉煌的篇章。在未来的征程上，学校将不忘初心，加快发展，努力建成国内知名特色高水平大学，为“一带一路”、国家交通基础设施建设和区域经济社会发展做出更大贡献！</p></div>

图像边框，在定义超链接时自动显示2~3px的蓝色粗边框，使用border标签可以清除。<a href="#"><img src="data:images/login.gif" alt="login" border="0"/></a>
半透明显示，opacity可以设计图像的不透明度。

body { background: #F0EADA; }
.watermark { position: relative;float: left;display: inline;
}
.img {background: white;padding: 5px 5px 9px 5px;background: white url(images/shad_bottom.gif) repeat-x bottom left;border-left: 2px solid #dcd7c8;border-right: 2px solid #dcd7c8;
}
.logo {filter: alpha(opacity=40);    -moz-opacity: 0.4;      opacity: 0.8;              position: absolute;right: 20px;bottom: 20px;
}

   <div class="watermark"><img src="data:images/1.jpg" class="img" width="400"><img src="data:images/logo.png" class="logo" width="100"></div>

圆形图象，border-radius属性可以设计圆角样式。border-radius:none|<length>{1,4} [/ <length>{1,4}]?，使用元素单独定义元素的四个顶角，border-top-right-radius,border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius。

img{width:300px;border:solid 1px #eee;}
.r1 {border-radius:12px;}
.r2 {border-radius:50%;}

  <img src="data:images/1.jpg" class="r1"><img src="data:images/2.jpg" class="r2">

阴影图像，box-shadow:none|<shadow>[,<shadow>]*

   img{width:300px;border:solid 1px #eee;}.r1 {border-radius:8px;box-shadow:8px 8px 14px #06C;}.r2 {border-radius:12px;box-shadow:-10px 0 12px red,10px 0 12px blue,0 -10px 12px yellow,0 10px 12px green;}

  <img src="data:images/1.jpg" class="r1"><img src="data:images/2.jpg" class="r2">

背景图像

定义背景图像，background-image:none|<url>定义背景图像源，background-repeat:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2}
背景原点、位置和裁剪，背景图像默认显示在左上角，background-position:[left|right|top|bottom|<percentage>|<length>]|[left|center|right|<percentage>|<length>]···，定义定位原点background-origin:border-box|padding-box|content-box;,定义裁剪区域background-clip:border-box|padding-box|content-box|text;
控制大小，background-size:[<length>|<percentage>|auto]{1,2}|cover|contain;
固定显示，background-attachment:fixed|local|scroll;

渐变背景

线性渐变，至少需要两个颜色，也可以选择设置一个起点或方向，linear-gradient(angle,color-stop1,color-stop2,···)

CSS3图像和背景的学习相关推荐

图像协方差矩阵_深度学习的预处理：从协方差矩阵到图像白化
图像协方差矩阵 by hadrienj 由hadrienj The goal of this post is to go from the basics of data preprocessing t ...
python改背景颜色_Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
!!!本博客,是对图像的背景颜色的修改的基础讲解~!!! 还包括一个练习--是对背景色修改的一点应用尝试!!!--始终相信学习多一点探索,脚步会更坚定一些~ 愿所有正在努力的人都可以坚持自己的路一直走 ...
html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色（末尾有一个小训练——是将所学得的图像颜色修改应用为画板一般的刷新）
文章目录愿所有正在努力的人都可以坚持自己的路一直走下去! 实现轨迹(跟踪)栏功能的函数函数主要参数讲解代码实现我们先创建一个窗体,为轨迹(跟踪)栏的挂载做准备接着我们把需要的轨迹(跟踪)栏添 ...
html背景纹理,如何用css3制作纹理背景
如何用css3制作纹理背景看到题目大家也许会想,这是什么意思,一直想系统一下自己的css3的知识,才发现自己对css3的掌握程度简直不敢直视,很多地方都差了好多,暂且一点点来学吧! 记得有一天在微博 ...
背景色自动切换html,css3动画之背景颜色的自动切换
因为不同浏览器内核的不同所以会产生浏览器兼容性问题背景颜色的变换 div{ width: 200px; height: 200px; background: blue; animation:myfi ...
CSS3如何调整背景图片大小
系列文章目录 CSS3实现半透明边框(1) CSS3实现多重边框(2) CSS3如何改变背景图片大小系列文章目录一.background-size 语法格式二.参数详解 1.length 2.p ...
php如何在添加div的背景颜色_css3颜色渐变：css3如何实现背景颜色渐变？
为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...
cnn生成图像显著图_基于CNN与图像前背景分离的显著目标检测
基于 CNN 与图像前背景分离的显著目标检测东野长磊 ; 万文鑫 [期刊名称] <软件导刊> [年 ( 卷 ), 期] 2020(019)001 [ 摘要 ] 为了解决计算 ...

CSS3图像和背景的学习

网页图像

背景图像

渐变背景

CSS3图像和背景的学习相关推荐

最新文章

热门文章