CSS基础伪类和CSS3图片

最新推荐文章于 2024-05-27 14:51:30 发布
最新推荐文章于 2024-05-27 14:51:30 发布
阅读量377 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ACBYCL/article/details/126183940
版权

一.伪元素

含义：在选择器上添加特殊效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a.ex1:hover,
        a.ex1:active {
            color: red;
        }

        a.ex2:hover,
        a.ex2:active {
            font-size: 150%;
        }

        a.ex3:hover,
        a.ex3:active {
            background: red;
        }

        a.ex4:hover,
        a.ex4:active {
            font-family: monospace;
        }

        a.ex5:visited,
        a.ex5:link {
            text-decoration: none;
        }

        a.ex5:hover,
        a.ex5:active {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <p>将鼠标移至链接上查看其样式改变.</p>

    <p><a class="ex1">这个链接改变颜色</a></p>
    <p><a class="ex2">这个链接改变字体大小</a></p>
    <p><a class="ex3">这个链接改变背景颜色</a></p>
    <p><a class="ex4">这个链接改变字体类型</a></p>
    <p><a class="ex5">这个链接改变文字修饰</a></p>
</body>

</html>

link visited hover active的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link    {color:green;}
        a:visited {color:green;}
        a:hover   {color:red;}
        a:active  {color:yellow;}
    </style>
</head>

<body>
    <p>将鼠标移上并点击此链接: <a href="http://www.baidu.com/">baidu.com</a></p>
</body>

</html>

before after 之类的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1:before {content:"我可以向前插入";}
    </style>
</head>

<body>
    <h1>This is a heading</h1>
    <p>The :before pseudo-element inserts content before an element.</p>
    <h1>This is a heading</h1>
    <p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p></body>

</html>

二.CSS图片

在这里插入图片描述

缩略图

素材

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <h2>缩略图</h2>
    <p>我们使用 border 属性来创建缩略图。</p>

    <img src="paris.jpg" alt="Paris" width="400" height="300">

</html>
效果展示

在这里插入图片描述

缩略图实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: inline-block;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            transition: 0.3s;
        }

        a:hover {
            box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        }
    </style>
</head>

<body>
    <h2>缩略图作为连接</h2>
    <p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
    <p>点击图片查看效果：</p>

    <a target="_blank" href="paris.jpg">
    <img src="paris.jpg" alt="Paris" width="400" height="300">
    </a>

</html>
效果展示

在这里插入图片描述

响应式图片

素材

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">


</html>

展示效果

在这里插入图片描述

图片文本

定位图片文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: relative;
        }

        .topleft {
            position: absolute;
            top: 8px;
            left: 16px;
            font-size: 18px;
        }

        img { 
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
    </style>
</head>

<body>
    <h2>图片文本</h2>
    <p>在图片左上角添加文本信息:</p>
    
    <div class="container">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
      <div class="topleft">左上角</div>
    </div>
</html>
展示效果

在这里插入图片描述
在这里插入图片描述

卡片式图片

图片素材

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {margin:25px;}

        div.polaroid {
        width: 80%;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin-bottom: 25px;
        }

        div.container {
        text-align: center;
        padding: 10px 20px;
        }
    </style>
</head>

<body>
    <h2>响应式卡片</h2>

    <div class="polaroid">
        <img src="rock600x400.jpg" alt="Norway" style="width:100%">
        <div class="container">
            <p>The Troll's tongue in Hardanger, Norway</p>
        </div>
    </div>

    <div class="polaroid">
        <img src="lights600x400.jpg" alt="Norway" style="width:100%">
        <div class="container">
            <p>Northern Lights in Norway</p>
        </div>
    </div>
</html>

展示效果

在这里插入图片描述

图片滤镜

CSS filter属性为元素添加可视效果（例如：模糊和饱和度）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 33%;
            height: auto;
            float: left; 
            max-width: 235px;
        }

        .blur {-webkit-filter: blur(4px);filter: blur(4px);}
        .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
        .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
        .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
        .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
        .invert {-webkit-filter: invert(100%);filter: invert(100%);}
        .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
        .saturate {-webkit-filter: saturate(7); filter: saturate(7);}
        .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
        .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
    </style>
</head>

<body>
    
    <p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>

    <img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>

展示效果

在这里插入图片描述

响应式图片相册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>
    <h2 style="text-align:center">响应式图片相册</h2>

    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_fjords.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_forest.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_lights.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_mountains.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="clearfix"></div>
    
    <div style="padding:6px;">
      
      <h4>重置浏览器大小查看效果</h4>
    </div>
</body>
</html>

展示效果

在这里插入图片描述

图片模态

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myImg {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

        #myImg:hover {opacity: 0.7;}

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }

        /* Modal Content (image) */
        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }

        /* Caption of Modal Image */
        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        /* Add Animation */
        .modal-content, #caption {    
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @-webkit-keyframes zoom {
            from {-webkit-transform: scale(0)} 
            to {-webkit-transform: scale(1)}
        }

        @keyframes zoom {
            from {transform: scale(0.1)} 
            to {transform: scale(1)}
        }

        /* The Close Button */
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
            .modal-content {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <h2>图片模态框</h2>
    <p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
    首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
    <p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
    <img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

    <!-- The Modal -->
    <div id="myModal" class="modal">
    <span class="close">×</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
    </div>

    <script>
    // 获取模态窗口
    var modal = document.getElementById('myModal');

    // 获取图片模态框，alt 属性作为图片弹出中文本描述
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        modalImg.alt = this.alt;
        captionText.innerHTML = this.alt;
    }

    // 获取 <span> 元素，设置关闭模态框按钮
    var span = document.getElementsByClassName("close")[0];

    // 点击 <span> 元素上的 (x), 关闭模态框
    span.onclick = function() { 
        modal.style.display = "none";
    }
    </script>
</body>
</html>

展示效果

在这里插入图片描述

ACBYCL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
心有猛狗
09-30 2万+
跟着慕课网的教程学习了一下伪类 ，然后试着练习了一下用CSS伪类来实现背景图片切换。 先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。 要用到的伪类及其作用有： 1、nth-of-type()给每个文字块设置不同颜色。 2、::after 添加圆形缩略图的div 3、nth-of-type()配合::after添加缩略图 4、 ::befor 给圆形缩
CSS与CSS3美化页面
AllenCode7的博客
12-27 1268
目录一、CSS简介1.1 什么是CSS?1.2 样式层叠次序二、CSS基础语法三、CSS使用方式四、CSS常用选择器五、CSS关系和属性选择器六、CSS伪类选择器七、CSS的尺寸和单位八、CSS字体与文本属性九、CSS背景属性十、CSS边框属性十一、CSS内外补白属性十二、CSS盒子模型实例十三、CSS定位属性十四、CSS布局属性十五、CSS实现导航十六、CSSflex弹性盒子介绍十七、CSS用户界面和多栏属性介绍十八、CSS表格和过度属性介绍十九、CSS旋转动画和媒体查询属性介绍二十、CSS字体图标的使用
css插入图片，css伪类hover插入图片
weixin_43923808的博客
11-30 789
【代码】css插入图片，css伪类hover插入图片。
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
crxk_的博客
07-14 2万+
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片 对于一些小图标类型的图片，若使用<img>略微有些麻烦，iconfont是一个不错的选择用起来也相当灵活，但是所需要步骤较为繁琐，今天介绍一种使用css伪元素快速插入图标的小技巧。 效果图 伪类 与 伪元素 伪类 在网上很多篇博客中并未将这两个解释清楚，很多博客直接写到利用css伪类插入图片，这种说法严格来讲是错误的。 CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态[1]。 通俗来说就是： 我们要在某个元素处
img标签添加::before ::after 伪元素无效，伪元素增加:hover伪类无效
最新发布
无心使然云中漫步
05-27 1051
## 1 问题 - img标签添加::before ::after 伪元素无效 - 伪元素增加:hover伪类无效 ## 2 解决 - 只能在img前后增加dom元素 - 可以这样写:hover::before{} :hover::after{}
CSS伪元素（以:after为例）插入图片
jianjieX的博客
07-02 1万+
看一眼效果图，我们要实现一个多行文本溢出显示省略号的展开（用图片代替）收起效果 <div class="wrapper"> <input id="exp1" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp1"></label> 浮动元素是如何定位的 正如我
伪类插入图片
m0_47974640的博客
05-30 500
.content::after { width: 64rpx; height: 64rpx; content: ''; position: absolute; background-size: 100% 100%; margin: 32rpx auto; left: 0; right: 0; background-image: url('图片链接'); }
CSS基础知识------CSS美化网页
weixin_44821216的博客
06-18 556
为什么使用css美化网页 1.可以有效地传递页面信息 2.使用css美化过的页面文本漂亮、美观、可以吸引用户 3.可以很好的突出页面的主题内容，使用户第一眼可以看到页面的主要内容 4.具有良好的用户体验 css字体 css字体属性定义文本的字体系列、大小、加粗、风格（如斜体等）和变形（如小型大写字母）。 设置字体类型 font-family用来设置字体类型。例如 font-family:"隶书";...
html+css3D轮播图片
01-29
接下来，我们需要为每张图片定义一个旋转角度，这可以通过CSS的伪类`:nth-child()`来实现。例如，第一张图片不旋转，第二张图片旋转360度，第三张图片旋转720度，以此类推： ```css .carousel img:nth-child(1) { ...
利用CSS3的checked伪类实现OL的隐藏显示的方法
09-25
CSS3的`checked`伪类是一种强大的选择器，它允许我们根据HTML表单中的复选框（`checkbox`）或单选按钮（`radio`）的状态来应用不同的样式。在本示例中，这个特性被用来创建一个可折叠的树状菜单，使得用户可以通过...
HTML+CSS3基础知识点资源
03-14
CSS3的新特性包括选择器的增强（如类选择器、属性选择器和伪类），盒模型的改进，以及新的布局模式如Flexbox（弹性盒子）和Grid（网格布局）。Flexbox主要用于单轴布局，可以轻松实现元素的对齐和自适应，而Grid则...
css3图片层叠菜单效果特效代码
03-20
1. **CSS3选择器**：CSS3引入了许多新的选择器，如类选择器、伪类选择器和属性选择器，这些可以帮助我们更精确地控制元素的样式，特别是对于创建动态菜单非常有用。例如，`:hover`伪类可以用于当鼠标悬停在菜单项上...
css3图片高亮突出显示特效代码
03-20
这个特效可以通过多种CSS3属性和技术实现，包括伪类、渐变、阴影、滤镜以及转换等。让我们详细探讨一下如何使用CSS3来创建这种特效。 首先，我们从基础开始。HTML结构中，图片通常作为`<img>`标签插入，例如： ```...
html基础结构
qq_45981441的博客
07-30 184
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </h
伪类中（：before 为例）添加添加图片方法
热门推荐
稻草人
04-23 4万+
a --> h1:before { content: " "; display: block; height: 40px; width: 40px; background: url(img/CSU001.jpg) no-repeat; background-size: 100%; } a heading a paragraph. a paragr
css 伪类设置背景图片,设置文字
weixin_42340514的博客
11-20 2374
.coupon-list .disabled::before { content: ""; width: 120rpx; height: 120rpx; position: absolute; top: -18rpx; right: -18rpx; opacity: .6; background-size: contain; ...
css笔记-img-a-伪类
tz_gx的专栏
11-07 1852
img 1:单标签 行间元素，默认表现inline-block效果，直接适用盒子模型 img标签不是直接在网页中插入图像，而是指定一个链接图像文件的地址。因此 img标签创建的是被引用图像的占位空间 background-repeat repeat：默认值。背景图像在垂直方向和水平方向重复 repeat-x：背景图像在水平方向重复 repeat-y:背景图像在垂直方向重复 n
(转)CSS结合伪类实现icon
CaseyWei
11-29 1305
老规矩，还是先说说业务场景：有一个图片列表，可以添加、删除和更改，其中呢删除时设计给的设计稿时悬浮（hover）在图片上时显示删除的图标，所以就有了这个用before实现icon的场景。
图解CSS伪类和伪元素
syzdev的博客
03-31 2019
1 简介 伪类和伪元素都属于CSS选择器的附加关键字，在形式上，用单冒号:表示伪类，用双冒号::表示伪元素，如： // 伪类 div:hover { } // 伪元素 div::after { } 注意：由于历史遗留问题，伪元素div::after和div:after两种写法在大部分浏览器下是等同的，不过按照规范，应当使用单冒号:用于表示伪类，双冒号::用于表示伪元素，以便区分伪类和伪元素。 2 伪类 伪类用于表示元素的某种状态，主要有操作状态，选择器状态以及表单状态几种，本文主要介绍操
1.03 CSS基础（）
10-07
总的来说，本文系统地介绍了CSS基础知识，包括CSS的概念和语法、字体的使用、背景的设置、伪类选择器的应用以及各种CSS属性的使用。通过学习和实践，读者将能够熟练掌握CSS的基本技能，为日后的网页设计和开发提供...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值