1.CSS影像透明度
CSS3中屬性的透明度是 opacity，
在這種情況下，當用戶將滑鼠懸停在影像上時，我們希望圖片是清晰的，
此CSS是：opacity=1，當滑鼠指標遠離影像時，影像將重新具有透明度，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
img {
opacity: 0.4;
/*filter: alpha(opacity=40);*/
}
img:hover {
opacity: 1.0;
/*filter: alpha(opacity=100);*/
}
</style>
</head>
<body>
<h1>圖片透明度</h1>
<p>opacity 屬性通常與 :hover 選擇器一起使用，在滑鼠移動到圖片上后改變圖片的透明度：</p>
<img src="img/images/tx.jpg" width="150" height="150" alt="表情圖" />
<img src="img/images/hetao.jpg" width="150" height="150" alt="核桃圖" />
</body>
</html>
2.在透明影像中添加文本
首先，我們創建一個固定的高度和寬度的div元素，帶有一個背景圖片和邊框，然后我們在第一個div內部創建一個較小的div元素， 這個div也有一個固定的寬度，背景顏色，邊框 - 而且它是透明的，透明的div里面，我們在P元素內部添加一些文本，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
div.background {
width: 500px;
height: 250px;
border: 2px solid black;
background: url(img/images/tx.jpg) repeat;
}
div.transbox {
width: 400px;
height: 180px;
border: 1px solid black;
margin: 30px 50px;
background-color: #FFFFFF;
opacity: 0.6;
/*filter: alpha(opacity=60);*/
}
div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，這些文本在透明框里，
</p>
</div>
</div>
</body>
</html>
3.CSS影像拼合技術
3.1 實體一
實體決議：
- #navlist{position:relative;} - 位置設定相對定位，讓里面的絕對定位
- #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設定為0，串列樣式被洗掉，所有串列項是絕對定位
- #navlist li, #navlist a{height:44px;display:block;} - 所有影像的高度是44px
現在開始每個具體部分的定位和樣式：
- #home{left:0px;width:46px;} - 定位到最左邊的方式，以及影像的寬度是46px
- #home{background:url(img/images/tv01.jpg) 0 0;} - 定義背景影像和它的位置（左0px，頂部0px）
- #prev{left:63px;width:43px;} - 右側定位63px（＃home寬46px+專案之間的一些多余的空間），寬度為43px，
- #prev{background:url(img/images/tv03.jpg) -47px 0;} - 定義背景影像右側47px（＃home寬46px+分隔線的1px）
- #next{left:129px;width:43px;}- 右邊定位129px(#prev 63px + #prev寬是43px + 剩余的空間), 寬度是43px.
- #next{background:url(img/images/tv05.jpg) no-repeat -91px 0;} - 定義背景影像右邊91px（＃home 46px+1px的分割線+＃prev寬43px+1px的分隔線）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
#navlist {
position: relative;
}
#navlist li {
position: absolute;
margin: 0;
padding: 0;
top: 0;
list-style: none;
}
#navlist li,#navlist a {
display: block;
height: 44px;
}
#home {
left: 0;
width: 46px;
background: url(img/images/tv01.jpg) 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url(img/images/tv03.jpg) -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url(img/images/tv05.jpg) -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="https://www.baidu.com"></a></li>
<li id="prev"><a href="https://www.tencent.com"></a></li>
<li id="next"><a href="https://www.huawei.com"></a></li>
</ul>
</body>
</html>
3.2 實體二
實體決議：
- 由于該串列項包含一個鏈接，我們可以使用：hover偽類，
- #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 對于所有三個懸停影像，我們指定相同的背景位置，只是每個再向下45px，
:hover 選擇器用于滑鼠懸停在元素上的顯示的效果
提示： :hover 選擇器可以運用于所有元素，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS簡單學習</title>
<style type="text/css">
#navlist {
position: relative;
}
#navlist li {
position: absolute;
margin: 0;
padding: 0;
top: 0;
list-style: none;
}
#navlist li,#navlist a {
display: block;
height: 44px;
}
#home {
left: 0;
width: 46px;
background: url(img/images/tv01.jpg) 0 0;
}
#home {
background: url(img/images/tv01.jpg) 0 0;
}
#home a:hover{
background: url(img/images/tv01.jpg) 0 -45px;
}
#prev {
left: 63px;
width: 46px;
background: url(img/images/tv03.jpg) -47px 0;
}
#prev {
background: url(img/images/tv03.jpg) -47px 0;
}
#prev a:hover{
background: url(img/images/tv03.jpg) -47px -45px;
}
#next {
left: 129px;
width: 46px;
background: url(img/images/tv05.jpg) -91px 0;
}
#next {
background: url(img/images/tv05.jpg) -91px 0;
}
#next a:hover{
background: url(img/images/tv05.jpg) -91px -45px;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="https://www.baidu.com"></a></li>
<li id="prev"><a href="https://www.tencent.com"></a></li>
<li id="next"><a href="https://www.huawei.com"></a></li>
</ul>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258963.html
標籤：其他
上一篇：用自家電腦裝網站無法訪問