CSS3图片

最新推荐文章于 2024-10-16 23:00:23 发布
最新推荐文章于 2024-10-16 23:00:23 发布
阅读量60 收藏
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52629158/article/details/130040415
版权

1.4.1 圆角图片

圆角图片的实现原理：直接在图片身上添加 border-radius: 10px;

 <style>
        .pic1{
            width: 220px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- 圆角图片 -->
    <img src="img/w1.jpg" alt="" class="pic1">

预览：

1.4.2 椭圆图片

<style>
        .pic2{
            width: 320px;
            height：150px;
            /* 椭圆图片 */
            /* 
             50% 50% 50% 50% 正斜杠前面的 4个50%，表示的是 四个角的水平半径
             /50% 50% 50% 50% 正斜杠后面的 4个50%，表示的是 四个角的垂直半径
            */
             border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
            /* border-radius: 50%/50%; */
            /* border-radius: 50%; */
        }
    </style>
</head>
<body>
    <!-- 圆角图片 -->
    <img src="img/f1.jpg" alt="" class="pic2">

 预览：

注意：你找的素材图，宽高比例要稍微大一些。这样椭圆效果形成的更加明显。

1.4.3 缩略图

我们使用 border 属性来创建缩略图。

    <style>
        .box img{
            width: 220px;
            border: 1px solid ;
            /* 观察：border-radius的圆角弧度 是出现在图片身上的，还是出现在图片外的边框上的？
                    border-radius的圆角弧度 是出现在 边框身上的。
            */
            border-radius: 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/w2.jpg" alt="">
    </div>

 预览：

1.4.4 响应式图片

响应式图片 会 自动适配 各种尺寸的屏幕。

当你拖到浏览器窗口的时候，这个图，会随着你在拖动窗口的时候，图的大小，会跟着等比例进行缩放。浏览器在水平方向上的水平滚动条不会出现。

 <style>
        .banner img{
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="img/trolltunga.jpg" alt="">
    </div>

 

1.4.5 定位图片文本

1.4.5.1 左上角文本

    <style>
        .con1{
            /* 父相 */
            position: relative;
        }
        .con1 img{
            maxwidth:100%;
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
        .con1 .topleft{
            /* 子绝 */
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="con1">
        <img src="img/trolltunga.jpg" alt="">
        <div class="topleft">左上角文本</div>
    </div>

 预览：

1.4.5.2 右上角文本

 <style>
        .con1{
            /* 父相 */
            position: relative;
        }
        .con1 img{
            maxwidth:100%;
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
        .con1 .topright{
            /* 子绝 */
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="con1">
        <img src="img/trolltunga.jpg" alt="">
        <div class="topright">右上角文本</div>
    </div>

 预览：

1.4.5.3 左下角文本

    <style>
        .con1{
            /* 父相 */
            position: relative;
        }
        .con1 img{
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
        .con1 .bottomleft{
            /* 子绝 */
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div class="con1">
        <img src="img/trolltunga.jpg" alt="">
        <div class="bottomleft">左下角文本</div>
    </div>

 预览：

1.4.5.4 右下角文本

  <style>
        .con1{
            /* 父相 */
            position: relative;
        }
        .con1 img{
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
        .con1 .bottomright{
            /* 子绝 */
            position: absolute;
            bottom: 8px;
            right: 15px;
        }
    </style>
</head>
<body>
    <div class="con1">
        <img src="img/trolltunga.jpg" alt="">
        <div class="bottomright">右下角文本</div>
    </div>

 预览：

1.4.5.5 居中文本

    <style>
        .con1{
            /* 父相 */
            position: relative;
        }
        .con1 img{
            width: 100%;
            height: auto;
            opacity: 0.3;
        }
        .con1 .center{
            /* 子绝 */
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -36px;
            margin-top: -9px;
            /* 此时，文字由文本撑开的宽度，就是当前盒子的宽度 （1个字的宽18px 乘以 4个字 = 72px）  
            72 取 一半， 就是36，这个盒子要向左移动36px
            18 取 一半，就是9，这个黑子要向上移动9px
            */
            font-size: 18px;
            outline: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="con1">
        <img src="img/trolltunga.jpg" alt="">
        <div class="center">居中文本</div>
    </div>

 预览：

1.4.6 卡片式图片

   <style>
        body{
            margin: 25px;
        }
        .cart{
            width: 80%;
            max-width: 80%;
            background-color: #fff;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);;
            margin-bottom: 26px;
        }
        .cart img{
            width: 100%;
        }
        .cart .container{
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="cart">
        <img src="img/trolltunga.jpg" alt="">
        <div class="container">
            <p>涓滴之水终可以磨损大石，不是由于它力量强大，而是由于昼夜不舍的滴坠。</p>
        </div>
    </div>

    <div class="cart">
        <img src="img/lights600x400.jpg" alt="">
        <div class="container">
            <p>为了自己想要的未来，你要相信，挺过这段难熬的时间，一切都会好起来的，所以你必须得满怀信心的坚持下去。</p>
        </div>
    </div>

 

预览：

1.4.7 图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

给图像设置高斯模糊

       .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%);
        }

给图像应用色相旋转

        .hue-rotate{
            /* 给图像应用色相旋转 */
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
        }

注意：

filter: hue-rotate(360deg); 这里如果你直接设置360deg。图是看不出效果的。如果你结合css3动画效果一起写。从0deg 变化到 360deg。可以看到图片色相的变化。

如果我们纯粹是给图加一个效果，用 filter: hue-rotate(度deg); 这个“度”取值，我们取0-360之间的数字。

整体预览：

 

仙鹤__
关注
CSS3 图片
山水子农
07-07 743
1、圆角图片 img { border-radius: 8px; } 圆角图片 使用 border-radius 属性来创建圆角图片:   img { border-radius: 50%; } 椭圆形图片 使用 border-radius 属性来创建椭圆形图片：   2、缩略图 我们使用 border 属性来创建
CSS3 图片 一
一个小暖贼的随手记录博客
08-17 166
圆角图片 圆角图片: img{ border-radius:8px;} 示例： <!doctype html> <html> <head> <meta charset="utf-8"> <title>文献测试专用</title> <style> img { border-radius:...
CSS基础伪类和CSS3图片
ACBYCL的博客
08-05 412
含义：在选择器上添加特殊效果 link visited hover active的使用 before after 之类的使用 二.CSS图片 效果展示 效果展示 展示效果 定位图片文本 展示效果 展示效果 CSS filter属性为元素添加可视效果（例如：模糊和饱和度） 展示效果 展示效果 展示效果...
CSS 3之图片缩放
程序员小白的博客
06-16 8854
使用 的描述标记 和 能设置图片大小； 和 分别表示图片的高度和宽度，可以是数值或百分比，单位可以用 px，也可以是**%、em、pt**； 注意： 高度属性是和宽度属性 设置要求相同； 例子1： CSS 3 中，可使用属性 和 设置图片的宽度和高度，以此达到图片的缩放效果；例子 2： CSS 3 中， 和 用来设置图片宽度最大值和高度最大值； 和 的值一般是数值类型； 语法格式如下所示： 或 在定义图片大小时，若图片默认尺寸超过了定义的大小，就以 所定义的宽度显示，二图片高度将同比例
CSS3 图片模糊处理
听海边涛声
08-29 1759
CSS3 图片模糊处理
12种炫酷CSS3图片切换过渡效果
12-29
【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本，它引入了许多新特性，其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验，特别是在图片...
纯css3图片分类过滤效果
12-13
总的来说，"纯css3图片分类过滤效果"是一个结合了CSS3高级特性的实用插件，它展示了CSS3在网页动态效果和交互性方面的强大能力。通过深入理解并实践这些技术，开发者可以创建出更加吸引人且用户体验优良的网页应用。
纯CSS3图片幻灯片切换效果
06-12
首先真的非常感谢世界上有了CSS3这么个东西，它使得很多网页特效不再需要依赖javascript脚本代码，使得浏览器执行起来更加方便快捷。但有一点我们得注意，因为目前绝大多数浏览器还是比较“旧”的版本，还不支持CSS3...
CSS3图片全屏显示.rar_CSS3图片全屏显示_mostlyda4
09-21
"CSS3图片全屏显示"是一个利用CSS3特性来实现的图片展示技术，它能够让图片以全屏的方式在网页上呈现，提供给用户更加震撼和沉浸式的浏览体验。这个特效通常被应用于网站的背景、幻灯片或者产品展示等场景，旨在提高...
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
01-19
　使用CSS3 圆角技术实现。 　使用CSS3样式单词：border-radius 　语法： 　div{border-radius:5px} 　对图片设置圆角样式： 　.abc img{border-radius:5px} 　设置class=”abc”对象图片四个角圆角为5px 　三、CSS...
CSS3背景图片
我不想说
08-30 1675
一，background-origin 背景图片的定位区域 看下面一个例子 <div class="wrap"> <span>padding</span> <div class="content">content</div> </div> <style> .wrap{ width:...
html css图片效果,css，css3实现各种图片效果总结
weixin_42513215的博客
06-03 750
按照常规的理解，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着css技术的发展以及css3的出现，各大厂商的浏览器的兼容性越来越好，利用css技术来处理和实现图片的各种效果变得越来越便捷。css及css3中的各种属性将很容易的帮助我们实现各种想要的图片效果。这里我们就来谈一谈使用css和css3来实现各种图片效果。首先可以学习Gxl网相关...
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
热门推荐
心有猛狗
09-30 2万+
跟着慕课网的教程学习了一下伪类 ，然后试着练习了一下用CSS伪类来实现背景图片切换。 先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。 要用到的伪类及其作用有： 1、nth-of-type()给每个文字块设置不同颜色。 2、::after 添加圆形缩略图的div 3、nth-of-type()配合::after添加缩略图 4、 ::befor 给圆形缩
4、CSS3笔记
weixin_45871977的博客
10-16 578
前端学习笔记4-CSS3
css3新增都知识点
最新发布
2301_80365562的博客
10-16 70
属性选择器、伪类选择器、伪元素选择器。
flex布局
cc1314_工作、学习有感
10-16 68
上，设置align-items , 子项就会保持其自身的高度了 ，不会自动高度对齐。
使用纯CSS和JavaScript来实现一个转盘抽奖效果
weixin_46328739的博客
10-10 723
使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同。
使用CSS+SVG实现加载动画
qq_33003143的博客
10-13 363
使用CSS和SVG实现加载动画
css 3D图片旋转
06-21
CSS 3D图片旋转是利用CSS3的transform属性来实现的视觉效果，它允许网页上的元素以三维空间中的方式进行定位和旋转。通过设置`transform: rotateX`, `rotateY`, 和 `rotateZ` 属性，你可以控制元素绕X、Y和Z轴的旋转...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值