当前位置:首页 > 前端技术 > CSS实现:background 渐变色+图片(含案例、代码、截图)

CSS实现:background 渐变色+图片(含案例、代码、截图)

2022年09月16日 22:37:15前端技术8

CSS实现:background 渐变色+图片(含案例、代码、截图)

  • background实现背景:渐变色+图片(含案例、代码、截图)

效果截图示下:

  • 演示效果,截图示下:
    CSS实现:background 渐变色+图片(含案例、代码、截图) _ JavaClub全栈架构师技术笔记

代码如下:

1. 单独设置:简单的背景色渐变

  • 简单的背景色渐变
    /* background: linear-gradient(to left,$base,$assist-clor); */
    background: linear-gradient(to left, #fe3b0f, #ff4e17)
    
    CSS实现:background 渐变色+图片(含案例、代码、截图) _ JavaClub全栈架构师技术笔记

2. 混合搭配设置:多背景色渐变+多图片

  • 正确使用#色值,代码示下:
    /*大背景图区域*/
    .bg1{
           
    	background: url(static/images/tabs-style2/wyc-bg.png) no-repeat center center, linear-gradient(105deg, #F8FCFF 0%, #C4CBD5 100%);
    	background-size: auto 100%;
    }
    
  • 正确使用rgba(),代码示下:
    /*大背景图区域*/
    .bg1{
           
    	background: url(static/images/tabs-style2/wyc-bg.png) no-repeat center center, linear-gradient(90deg,rgba(248,252,255,1) 0%, rgba(196,203,213,1) 100%);
    	background-size: auto 100%;
    }
    

错误写法,导致背景显示空白!【正常是:背景图片设置在前,渐变色设置在后】

/*错误写法:*/
background: linear-gradient(to right, #F8FCFF, #C9D0D8), url(static/images/tabs-style2/wyc-bg.png) >no-repeat center center;

使用说明:

  1. 多背景设置:请使用英文,并列设置即可。
  2. 渐变色种类、渐变%百分比,渐变角度、渐变方向,均可按css属性进行自定义代码设置;

其他文章推荐:


以上就是关于“CSS实现:background 渐变色+图片(含案例、代码、截图)”的全部内容。

作者:草巾冒小子
来源链接:https://blog.csdn.net/qq_35393869/article/details/124491280

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42117.html

标签: css
分享给朋友:

“CSS实现:background 渐变色+图片(含案例、代码、截图)” 的相关文章

scrapy css选择器提取a标签内href属性值

 示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div&...

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。