CSS创建图片库&透明图片&媒介类型

最新推荐文章于 2021-08-04 08:41:37 发布

时间解

最新推荐文章于 2021-08-04 08:41:37 发布

阅读量757

点赞数

分类专栏： CSS 文章标签： css float margin opacity media

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS图片库

列出一系列图片，并在图片下面添加文字，将特殊的图片突出显示：

<!doctype html>
<html>
<head>
<style>
div.img
{
  float:left;
  height:auto;      <!-- 自动调整元素的高度、宽度 -->
  width:auto;
  margin:3px;
  border:1px solid #ff00ff;
  text-align:center; 
}
div.img img
{
  width=160px;      <!-- 统一图片的大小 -->
  height=160px;
  display:inline;
  margin:3px;
  border:1px solid #ff0000;
}
div.img a:hover img  <!-- 当鼠标在链接上时改变图片的边框颜色 -->
{
  border:1px solid #00ff00;
}
div.desc
{
  width:150px;
  margin:10px 5px 10px 5px;
  text-align:center;
  font-weight:normal;
  font-size:12px;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="/i/tulip_ballade.jpg">
    <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="260" height="260">  <!-- 特殊的图片可突出显示 -->
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_flaming_club.jpg">
    <img src="/i/tulip_flaming_club_s.jpg" alt="club">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_fringed_family.jpg">
    <img src="/i/tulip_fringed_family_s.jpg" alt="family">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_peach_blossom.jpg">
    <img src="/i/tulip_peach_blossom_s.jpg" alt="blossom">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

</body>
</html>

CSS图片透明 opacity

当鼠标移动到图片时，改变图片的透明度，透明度取值范围:[0, 1]：

img
{
    opacity:0.4;
    filter:alpha(opacity=40);  <!-- For IE8 and earlier，取值范围[0, 100] -->
}
img:hover
{
    opacity:1.0;
    filter:alpha(opacity=100); <!-- For IE8 and earlier，取值范围[0, 100] -->
}

在一个图片上放置一段文字，并且文字不完全遮挡图片：

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 400px;
  height: 266px;
  margin:15px;
  background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
  border: 1px solid red;
}

div.transbox
{
  width: 338px;
  height: 204px;
  margin:30px;               <!-- 将段落所在的div放置在图片中间位置 -->
  padding:0;
  background-color: #ffffff;
  border: 1px solid red;
  opacity:0.6;               <!-- 设置透明度，可看到文字后面的图片 -->
  filter:alpha(opacity=60);  <!-- For IE8 and earlier，取值范围[0, 100] -->
}

div.transbox p
{
  margin: 30px 40px;         <!-- 将段落放置在div的中间位置 -->
  color: #000000;
  font:bold 12px Verdana, Geneva, sans-serif;
  line-height:1.5;
}
</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>

使用javascript动态改变文本的透明度：

<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
    // 返回被选选项的文本
    var opacity=x.options[x.selectedIndex].text;
    var el=document.getElementById("p1");
    if (el.style.opacity!==undefined)
        {el.style.opacity=opacity;}
    else
        {alert("Your browser doesn't support this example!");}
}
</script>
</head>
<body>

<p id="p1">请从下面的例子中选择一个值，以改变此文本的透明度。</p>

<select onchange="ChangeOpacity(this);" size="5">
  <option />0
  <option />0.2
  <option />0.5
  <option />0.8
  <option selected="selected" />1   <!-- 默认透明度为1 -->
</select>

</body>
</html>

CSS媒介类型 @media

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
例如，”font-size”属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif字体更易阅读，而在纸媒介上，serif字体更易阅读。

媒介的类型有以下几种：

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

在显示器上显示为14px的字体，当打印时使用10px的字体：

<html>
<head>

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
    p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
    p.test {font-weight:bold}
}
</style>

</head>

<body>....</body>

</html>