web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置

简介: web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置

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>



相关文章
|
1天前
|
前端开发 JavaScript 安全
Web前端开发中的三大主流框架
Web前端开发中的三大主流框架
|
1天前
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
10 1
|
4天前
|
前端开发 开发者 UED
CSS进阶-CSS Sprites技术
【6月更文挑战第14天】**CSS Sprites是一种合并多个小图至大图的技术,减少HTTP请求,提升页面加载速度。本文探讨了精灵图的核心概念,常见问题(如定位不准、适应性问题、维护困难)及解决方案。建议使用工具精确计算坐标,采用媒体查询适应不同屏幕,建立图标管理机制,并提供代码示例展示如何应用。尽管有WebP、SVG等新技术,但在处理大量小图标时,CSS Sprites仍是高效选择。理解和掌握此技术对前端开发者至关重要。**
|
4天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
18 2
|
5天前
|
前端开发 JavaScript 测试技术
web前端语言框架:探索现代前端开发的核心架构
web前端语言框架:探索现代前端开发的核心架构
17 4
|
5天前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
9 3
|
7天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
14 2
|
7天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
26 3
|
7天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
25 2
|
12天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
18 0

热门文章

最新文章