训练营 坚持完成打卡任务 报名费全额返 更多>>
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
搜索
历史记录 清除记录
- 你还没搜索过喔。
点击刷新
创建透明图像 - 鼠标悬停效果
<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="/statics/images/course/klematis.jpg" width="150" height="113" alt="klematis">
<img src="/statics/images/course/klematis2.jpg" width="150" height="113" alt="klematis">
<p><b>Note:</b> In IE, a <!DOCTYPE> must be added for the :hover selector to work on other elements than the <a> element.</p>
</body>
</html>
创建一个背景图像与文本的透明框
<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width: 500px;
height: 250px;
background: url(/statics/images/course/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)