Image Opacity / Transparency

  • The CSS opacity property is a part of the CSS3 recommendation.

Example

 img {

     opacity: 0.4;

     filter: alpha(opacity=40); /* For IE8 and earlier */

 }

 img:hover {

     opacity: 1.0;

     filter: alpha(opacity=100); /* For IE8 and earlier */

 }

Image Sprites

  • An image sprite is a collection of images put into a single image.

Example

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 #navlist {

     position: relative;

 }

 #navlist li {

     margin: 0;

     padding: 0;

     list-style: none;

     position: absolute;

     top: 0;

 }

 #navlist li, #navlist a {

     height: 44px;

     display: block;

 }

 #home {

     left: 0px;

     width: 46px;

     background: url('img_navsprites_hover.gif') 0 0;

 }

 #prev {

     left: 63px;

     width: 43px;

     background: url('img_navsprites_hover.gif') -47px 0;

 }

 #next {

     left: 129px;

     width: 43px;

     background: url('img_navsprites_hover.gif') -91px 0;

 }

 #home a:hover {

     background: url('img_navsprites_hover.gif') 0 -45px;

 }

 #prev a:hover {

     background: url('img_navsprites_hover.gif') -47px -45px;

 }

 #next a:hover {

     background: url('img_navsprites_hover.gif') -91px -45px;

 }

 </style>

 </head>

 <body>

 <ul id="navlist">

   <li id="home"><a href="default.asp"></a></li>

   <li id="prev"><a href="css_intro.asp"></a></li>

   <li id="next"><a href="css_syntax.asp"></a></li>

 </ul>

 </body>

 </html>

CSS Attribute Selectors

  • Style HTML elements that have specific attributes or attribute values.

1> CSS [attribute] Selector

  • Used to select elements with a specified attribute.

2> CSS [attribute="value"] Selector

  • Used to select elements with a specified attribute and value.

Example

 a[target] {

     background-color: yellow;

 }

 a[target="_blank"] {

     background-color: blue;

 }

3> CSS [attribute~="value"] Selector

  • Used to select elements with an attribute value containing a specified word.

4> CSS [attribute*="value"] Selector

  • Used to select elements whose attribute value contains a specified value.
 [title~=flower] {

     border: 5px solid yellow;

 }

 title="klematis flower"   > yes

 title="flower"            > yes

 title="tree_flower"       > no

 [class*="te"] {

     background: yellow;

 }

 class="first_test"        > yes

 class="mytest"            > yes

5> CSS [attribute|="value"] Selector

  • Used to select elements with the specified attribute starting with the specified value.

6> CSS [attribute^="value"] Selector

  • Used to select elements whose attribute value begins with a specified value.
 [class|=top] {

     background: yellow;

 }

 class="top-header"    > yes

 class="top-text"      > yes

 class="topcontent"    > no

 [class^="top"] {

     background: yellow;

 </style>

 class="top-header"    > yes

 class="top-text"      > yes

 class="topcontent"    > yes

7> CSS [attribute$="value"] Selector

  • Used to select elements whose attribute value ends with a specified value.
 [class$="test"] {

     background: yellow;

 }

 class="first_test"      > yes

 class="my-test"         > yes

CSS 笔记六（Image/Attribute Selectors）的更多相关文章

  1. （3）选择元素——（6）属性选择器（Attribute selectors）

    Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an ...

  2. 《MFC游戏开发》笔记六 图像双缓冲技术：实现一个流畅的动画

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9334121 作者:七十一雾央 新浪微博:http:/ ...

  3. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  4. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  5. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  6. Python学习笔记六

    Python课堂笔记六 常用模块已经可以在单位实际项目中使用,可以实现运维自动化.无需手工备份文件,数据库,拷贝,压缩. 常用模块 time模块 time.time time.localtime ti ...

  7. Typescript 学习笔记六：接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Django开发笔记六

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.登录功能完善 登录成功应该是重定向到首页,而不是转发 ...

  9. python3.4学习笔记(六) 常用快捷键使用技巧，持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

随机推荐

  1. Linux_权限

    一.查看文件或文件夹权限 [root@hadoop09-linux etc]# ll -h /etc #ll 是ls -l 的缩写方式 -h文件大小单位k 截取其中三行说明 drwxr-xr-x. 2 ...

  2. ArcGIS AddIN之工具不可用

    AddIN做的工具,第一次打开时工具亮起(可用),第一次点击之后工具就灰掉(不可用) 原因:该工具没有找到响应函数 具体原因:之前做的好多工具,好多个项目,好多代码.现在统一放到一个项目中,一个工具条 ...

  3. 流式布局&固定宽度&响应式&rem

    我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...

  4. 一次有趣的XSS漏洞挖掘分析（3）最终篇

    这真是最后一次了.真的再不逗这个程序员了.和预期一样,勤奋的程序员今天又更新程序了.因为前面写的payload都有一个致命的弱点,就是document.write()会完全破坏DOM结构.而且再“完事 ...

  5. 演示一个导致ora-01555错误的场景

    1创建一个undo表空间 2查看当前undo配置 3更该默认undo表空间 4确认更改的配置 5创建一张测试表 6模拟批量操作 7 查询2分钟前的数据 从这里可以到当查询2分钟前的数据时候,系统报出O ...

  6. EmguCV 轮廓分析函数汇总

    一.cvApproxPoly 使用多边形逼近一个轮廓,使得顶点数目变少.算法先从轮廓选择2个最远的点,然后将2个连成一个线段,然后再查找轮廓上到线段距离最远的点,添加到逼近后的新轮廓.算法反复迭代,不 ...

  7. 【转】oracle回闪操作

    在9i上执行的操作 查询test表中记录select * from test;删除test表中记录delete from test;获得过去的会话exec dbms_flashback.disable ...

  8. window.self ->window.top->window.parent

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...

  9. python简单爬虫示例

    #coding=utf-8   import urllib import re   def downloadPage(url):     h = urllib.urlopen(url)     ret ...

  10. ajax同步、异步执行简单理解与证明

    此理解范例代码来自前几篇随笔! 首先我们来先了解下AJAX: Ajax:全称“Asynchronous Javascript and XML”(异步Javascript和XML),他是由Javascr ...