首页 > 其他分享 >css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术

时间：2023-03-24 13:02:44浏览次数：33  
标签：透明 navsprites img width gif 图像 CSS


阅读目录

  • CSS 图片廊
  • 公共的HTML布局
  • CSS 创建图片廊
  • 响应式图片廊
  • CSS 图像透明/不透明
  • 创建一个透明图像
  • 图像的透明度 – 悬停效果
  • 透明的盒子中的文字
  • CSS 图像拼合技术
  • 图像拼合
  • 图像拼合 – 简单实例
  • 实例解析：
  • 图像拼合 – 创建一个导航列表
  • 实例解析：
  • 图像拼合s – 悬停效果
  • 实例解析：

CSS 图片廊

公共的HTML布局

首先是我们用到的公共的HTML布局，下面的例子都将用到：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
       
    </style>
</head>
<body>

/* HTML */
<div class="responsive">
    <div class="img">
    <a target="_blank" href="3.jpg">
        <img src="3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
    
<div class="responsive">
    <div class="img">
    <a target="_blank" href="5.jpg">
        <img src="5.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
    
<div class="responsive">
    <div class="img">
    <a target="_blank" href="a.jpg">
        <img src="a.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
    
<div class="responsive">
    <div class="img">
    <a target="_blank" href="shopping_cart.png">
        <img src="shopping_cart.png" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>

</body>
</html>

CSS 创建图片廊

/* CSS */
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_html_02

响应式图片廊

使用 CSS3 的媒体查询来创建响应式图片廊：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_html_03

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        div.img {
            border: 1px solid #ccc;
        }

        div.img:hover {
            border: 1px solid #777;
        }

        div.img img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
        }

        * {
            box-sizing: border-box;
        }

        .responsive {
            padding: 0 6px;
            float: left;
            width: 24.99999%;
        }

        @media only screen and (max-width: 700px){
            .responsive {
                width: 49.99999%;
                margin: 6px 0;
            }
        }

        @media only screen and (max-width: 500px){
            .responsive {
                width: 100%;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>

<div class="responsive">
    <div class="img">
    <a target="_blank" href="3.jpg">
        <img src="3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
    
<div class="responsive">
    <div class="img">
    <a target="_blank" href="5.jpg">
        <img src="5.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
    
<div class="responsive">
    <div class="img">
    <a target="_blank" href="a.jpg">
        <img src="a.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>
    
<div class="responsive">
    <div class="img">
    <a target="_blank" href="shopping_cart.png">
        <img src="shopping_cart.png" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
    </div>
</div>

</body>
</html>

CSS 图像透明/不透明

使用CSS很容易创建透明的图像。

注意：CSS Opacity 属性是W3C的CSS3建议的一部分。

创建一个透明图像

CSS3中属性的透明度是 opacity。首先，我们将向您展示如何用CSS创建一个透明图像。

正常的图像

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_ci_04


相同的图像带有透明度：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_css_05


看看下面的CSS：

img {
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

图像的透明度 – 悬停效果

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_CSS_06

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        img {
            opacity:0.4;
            filter:alpha(opacity=40); /*  IE8 及其更早版本 */
        }
        img:hover {
            opacity:1.0;
            filter:alpha(opacity=100); /* IE8 及其更早版本 */
        }
    </style>
</head>
<body>

    <img src="3.jpg" alt="图片文本描述" width="300" height="200">

</body>
</html>

第一个CSS块是和例1中的代码类似。
此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。
在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。

此CSS是：opacity=1.

IE8和更早版本使用： filter:alpha(opacity=100).

当鼠标指针远离图像时，图像将重新具有透明度。

透明的盒子中的文字

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_html_07


首先，我们创建一个固定的高度和宽度的 div 元素，带有一个背景图片和边框。

然后我们在第一个 div 内部创建一个较小的 div 元素。

这个div也有一个固定的宽度，背景颜色，边框 – 而且它是透明的。透明的div里面，我们在P元素内部添加一些文本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        div.background {
            width:500px;
            height:250px;
            background:url(3.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); /* IE8 及更早版本 */
        }
        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>

CSS 图像拼合技术

图像拼合

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量，并节省带宽。

图像拼合 – 简单实例

与其使用三个独立的图像，不如我们使用这种单个图像（ ”img_navsprites.gif” ）：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_css_08


有了CSS，我们可以只显示我们需要的图像的一部分。

在下面的例子CSS指定显示 “img_navsprites.gif” 的图像的一部分：

效果如下：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_css_09

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style>
        img.home {
            width: 46px;
            height: 44px;
            background: url(img_navsprites.gif) 0 0;
        }

        img.next {
            width: 43px;
            height: 44px;
            background: url(img_navsprites.gif) -91px 0;
        }
    </style>
</head>
<body>

    <img class="home" src="Background.png"><br><br>
    <img class="next" src="Background.png">

</body>
</html>

以下 Background.png：透明图片：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_CSS_10

实例解析：

<img class="home" src="img_trans.gif" /> - 因为不能为空，src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像

宽度：46px;高度：44px; – 定义我们使用的那部分图像

background:url(img_navsprites.gif) 0 0; – 定义背景图像和它的位置（左0px，顶部0px）

这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果。

图像拼合 – 创建一个导航列表

我们想使用拼合图像 (“img_navsprites.gif”) ，以创建一个导航列表。

我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_css_11

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像拼合 – 创建一个导航列表</title>
    <style>
        #navlist {
            position: relative;
        }

        #navlist li {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0;
        }

        #navlist li,
        #navlist a {
            height: 44px;
            display: block;
        }

        #home {
            left: 0px;
            width: 46px;
        }

        #home {
            background: url('img_navsprites.gif') 0 0;
        }

        #prev {
            left: 63px;
            width: 43px;
        }

        #prev {
            background: url('img_navsprites.gif') -47px 0;
        }

        #next {
            left: 129px;
            width: 43px;
        }

        #next {
            background: url('img_navsprites.gif') -91px 0;
        }
    </style>
</head>
<body>

    <ul id="navlist">
        <li id="home"><a href="/"></a></li>
        <li id="prev"><a href="/css/"></a></li>
        <li id="next"><a href="/css/"></a></li>
    </ul>

</body>
</html>

实例解析：

#navlist{position:relative;} – 位置设置相对定位，让里面的绝对定位

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

margin 和 padding 设置为 0，列表样式被删除，所有列表项是绝对定位。

所有图像的高度是44px

#navlist li,
#navlist a {
    height: 44px;
    display: block;
}

现在开始每个具体部分的定位和样式：

#home{left:0px;width:46px;} 定位到最左边的方式，以及图像的宽度是46px

#home{background:url(img_navsprites.gif) 0 0;} 定义背景图像和它的位置（左0px，顶部0px）

#prev{left:63px;width:43px;} 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。

#prev{background:url('img_navsprites.gif') -47px 0;} 定义背景图像右侧47px（＃home 宽 46px+ 分隔线的 1px）

#next{left:129px;width:43px;} 右边定位 129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.

#next{background:url('img_navsprites.gif') no-repeat -91px 0;} 定义背景图像右边 91px（#home 46px+1px的分割线+#prev宽43px+1px的分隔线）

图像拼合s – 悬停效果

现在，我们希望我们的导航列表中添加一个悬停效果。

:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。

我们的新图像 (“img_navsprites_hover.gif”) 包含三个导航图像和三幅图像：

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_CSS_12


因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。

css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术_html_13

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <style>
        #navlist {
            position: relative;
        }

        #navlist li {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0;
        }

        #navlist li,
        #navlist a {
            height: 44px;
            display: block;
        }

        #home {
            left: 0px;
            width: 46px;
        }

        #home {
            background: url('img_navsprites_hover.gif') 0 0;
        }

        #home a:hover {
            background: url('img_navsprites_hover.gif') 0 -45px;
        }

        #prev {
            left: 63px;
            width: 43px;
        }

        #prev {
            background: url('img_navsprites_hover.gif') -47px 0;
        }

        #prev a:hover {
            background: url('img_navsprites_hover.gif') -47px -45px;
        }

        #next {
            left: 129px;
            width: 43px;
        }

        #next {
            background: url('img_navsprites_hover.gif') -91px 0;
        }

        #next a:hover {
            background: url('img_navsprites_hover.gif') -91px -45px;
        }
    </style>
</head>
<body>

    <ul id="navlist">
        <li id="home"><a href="/"></a></li>
        <li id="prev"><a href="/"></a></li>
        <li id="next"><a href="/"></a></li>
    </ul>

</body>
</html>

实例解析：

由于该列表项包含一个链接，我们可以使用：hover 伪类。

#home a:hover {
		            background: url('img_navsprites_hover.gif') 0 -45px;
		        }

对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px。


标签：透明,navsprites,img,width,gif,图像,CSS
From： https://blog.51cto.com/u_13571520/6147111

相关文章

  • css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素
    阅读目录CSS组合选择符后代选择器子元素选择器相邻兄弟选择器后续兄弟选择器CSS伪类(Pseudo-classes)伪类和CSS类CSS:first-child伪类匹配第一个``元素匹配所有......
  • css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐
    阅读目录CSS布局–Overflowoverflow:visibleoverflow:hiddenoverflow:scrolloverflow:autoverflow-x和overflow-y所有CSSOverflow属性CSSFloat浮动float属性......
  • CSS3实现的线条波浪动画效果
    阅读目录阐述HTML结构CSS样式预览阐述这是一款使用CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS......
  • CSS实现的大型导航下拉菜单
    阅读目录阐述HTML结构CSS预览阐述这是一款纯CSS实现的大型导航下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分......
  • 纯CSS和HTML打造树结构
    阅读目录源码HTML源码请到资源下载源码。HTML我们以某个公司的部门组织结构为例，其实就是一个无限级分类，我们首先定义好HTML结构，它有ulli组成，代码应该像这样：<!DOCTYPEhtml>......
  • CSS中的transform（2D转换）
    transform是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。有以下三种转换函数：旋转函数（rotate）移动函数（translate）缩放......
  • css绝对定位，没有设置left或top
    目标：做h5实现以下情形问题：不知为何成了这样：   分析：下列是代码： 已知id="div_2"的div的父类已经定位，故该div块的位置是相对于这个父类。修改之前的代码：进行......
  • vite scss相关
    viteisassScss与Sass异同vite项目安装sassnpmisass-D然后在项目中添加如下即可<stylescopelang="scss"></style>项目主题切换利用sass的混入特性，实现切换......
  • css绘制一个Pinia小菠萝
    效果如下：pinia小菠萝分为头部和身体，头部三片叶子，菠萝为身体头部先绘制头部的盒子，将三片叶子至于头部盒子中先绘制中间的叶子，利用border-radius实现叶子的效果，可以借......
  • CVPR 2023 | 超越MAE！谷歌提出MAGE：图像分类和生成达到SOTA！
    前言 本文介绍了在一篇CVPR2023论文中，来自MIT和谷歌的研究人员提出了一种全新的框架MAGE，同时在图像识别和生成两大任务上实现了SOTA。本文转载自机器之心仅用于学......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99