zoukankan      html  css  js  c++  java
  • css 专区图片处理

    <!doctype html>
    <html>
    <head>
    <style>
    div.img
      {
      margin:3px;
      border:1px solid #bebebe;
      height:auto;
      auto;
      float:left;
      text-align:center;
      }
    div.img img
      {
      display:inline;
      margin:3px;
      border:1px solid #bebebe;
      }
    div.img a:hover img
     {
      border:1px solid #333333;
      outline:red solid 4px;//添加外边框轮廓
      }
    div.desc
      {
      text-align:center;
      font-weight:normal;
      150px;
      font-size:12px;
      margin:10px 5px 10px 5px;
      }
    </style>
    </head>
    <body>
    <div class="img">
      <a target="_blank" href="/i/tulip_ballade.jpg">
      <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
      </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="Ballade" width="160" height="160">
      </a>
      <div class="desc">在此处添加对图像的描述</div>
    </div>
    <div class="img">
      <a target="_blank" href="/i/tulip_fringed_family.jpg">//target在完整页面显示
      <img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
      </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="Ballade" width="160" height="160">
      </a>
      <div class="desc">在此处添加对图像的描述</div>
    </div>
    </body>
    </html>
    css图像透明度  CSS opacity 属性是 W3C CSS 推荐标准的一部分。

    IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。

    IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。
    <head> <style> div.background { 400px; height: 266px; background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;//不允许平铺 border: 1px solid black; } div.transbox { 338px; height: 204px; margin:30px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(op acity=60); /* CSS3 standard */ opacity:0.6;//设置滤镜 } div.transbox p { margin: 30px 40px;} </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〉

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    CentOS7源码安装 mplayer-1.1
    CentOS6开关机日志查询
    Redis GUI客户端
    CST & UTC时间差
    FreeBSD10.0 PXE安装
    PostgreSQL9.6源码安装
    phpPgAdmin-5.1安装配置
    js截取文件名不带后缀
    在MongoDB中修改数据类型
    win10怎么修改DNS
  • 原文地址:https://www.cnblogs.com/HorseKing/p/3550605.html
Copyright © 2011-2022 走看看