css高级样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片替换技术</title> <style type="text/css"> h1 { width: 168px; height: 81px; background: url("京东LOGO.png"); border: 1px solid black; } a{ border: 1px solid #ff0000; width: 168px; height: 81px; display: block; text-indent: -1000px; } </style> </head> <body> <h1><a href="定位.html">京东</a></h1> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片透明效果</title> <style type="text/css"> img{ opacity: 0.4; /*background: rgba(0,0,0,0.6);*/ } img:hover{ opacity: 1; } /*此处不能使用rgba改变背景透明的方式来做效果,因为,rgba只针对背景颜色改变,*/ /*而opacity针对是整个元素透明效果的改变*/ </style> </head> <body> <img src="sprites2.png" alt=""/> </body> </html>
<style type="text/css"> .out{ width: 200px; height: 200px; background: yellow; overflow: hidden; } .in{ width: 100px; height: 100px; background: green; margin-top: 50px; position: static; z-index: -1; } </style> </head> <body> <div class="out"> <div class="in"></div> </div> </body> </html>