知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：

    • 这张图其实可以分成两部分，右边控制图形和渐变，左边就是一张纯色背景，和渐变无关

    • 透明transparent也是一种颜色，也是渐变可以设置的

下面我把自己的代码贴出来，仅供参考

布局

<body>

    <div class="bg-gradient">

        <div class="pic"></div>

    </div>

</body>

css样式

<style>

        .bg-gradient {

            margin: 0 auto;

            background: rgb(244, 195, 77);

            position: relative;

            width: 600px;

            height: 350px;

        }

        .bg-gradient .pic{

            background-image: linear-gradient(to right, rgb(244, 195, 77), transparent), url("bg.jpg");

            background-position: center;

            background-blend-mode: normal;

            position: absolute;

            height: 100%;

            width: 250px;

            right:;

        }
</style>

最后的效果如下

以上就是我的代码，谢谢观看。

　　ps：如果你想要在其中写点文字后出了问题，我不觉得这是个问题好吧，那是你的问题。听我的，你要自主解决。（明言明语）

css特效实现透明渐变的更多相关文章

  1. css：设置div边框透明+渐变

    写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+ ...

  2. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  3. CSS实现背景透明，文字不透明（各浏览器兼容）

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  4. CSS实现背景透明，文字不透明（各浏览器兼容） (转)

    /*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...

  5. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  6. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  7. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  8. CSS特效汇集

    http://www.lanrenzhijia.com/js/css3/ http://js.mobanwang.com/special/allcss/ 其他效果:http://www.cnblogs ...

  9. CSS特效集锦：视觉魔法的碰撞与融合（二）

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

随机推荐

  1. 无法将“Scaffold-DbContext”项识别为 cmdlet、函数、脚本文件或可运行程序的名称...

    原文链接:https://my.oschina.net/taadis/blog/889560 为什么80%的码农都做不了架构师?>>>     PM> Scaffold-DbC ...

  2. 右键查看别人网页的js代码为什么会显示乱码

    查看别人网页的js显示乱码 解决方法: 打开浏览器,选择设置,点击更多,选择文字编码为Unicode

  3. Jira 入门【转】

    JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域.它是一个集 项目计划.任务分配.需求管理.错误跟踪 ...

  4. linux 查看gpu信息

  5. openstack kvm cannot set up guest memory 'pc.ram': Cannot allocate memory

    Kvm:启动报错:error: internal error: process exited while connecting to monitor: 2018-11-12T01:47:14.9933 ...

  6. Mybatis自定义控制台打印sql的日志工具

    调试mybatis源码时,想要更改日志的的实现工具,首先需要了解其原理. 源码包里有这部分的解释,翻译如下: Mybatis 的内置日志工厂提供日志功能,内置日志工厂将日志交给以下其中一种工具作代理: ...

  7. arcpy arcgis python实例教程--原点夹角距离定义线（坐标正算）

    arcpy arcgis python实例教程--原点夹角距离定义线(坐标正算) 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 此地理处理工具 ...

  8. Java 理论与实践-非阻塞算法简介

    在不只一个线程访问一个互斥的变量时,所有线程都必须使用同步,否则就可能会发生一些非常糟糕的事情.Java 语言中主要的同步手段就是 synchronized 关键字(也称为内在锁),它强制实行互斥,确 ...

  9. 【E2E】Tesseract5+VS2017+win10源码编译攻略

    一,记录我目前在win10 X64和VS2017的环境下成功编译Tesseract5.0的方式: 二,记录在VS2017 C++工程中调用Tesseract4.0的方法: 三,记录编译和调用Tesse ...

  10. 小D课堂 - 零基础入门SpringBoot2.X到实战_第8节 数据库操作之整合Mybaties和事务讲解_32..SpringBoot2.x持久化数据方式介绍

    笔记 1.SpringBoot2.x持久化数据方式介绍          简介:介绍近几年常用的访问数据库的方式和优缺点 1.原始java访问数据库             开发流程麻烦        ...