CSS背景图和渐变色共存

需求场景是在一个DOM元素上需要背景图和渐变色共存

实现

background: url(https://img.alicdn.com/imgextra/i4/1881744325/O1CN01JBktT81hotb8c6Py0_!!1881744325.png) center no-repeat,linear-gradient(to bottom,red,#3c3f40);

效果

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>css背景图和渐变</title><link rel="stylesheet" href=""><style type="text/css">*{padding: 0;margin: 0;}</style>
</head>
<body><style type="text/css">h1{height: 400px;text-align: center;background: url(https://img.alicdn.com/imgextra/i4/1881744325/O1CN01JBktT81hotb8c6Py0_!!1881744325.png) center no-repeat,linear-gradient(to bottom,red,#3c3f40);line-height: 400px;}</style><h1>css渐变和背景共存</h1>
</body>
</html>

CSS背景图和渐变色共存相关推荐

css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
HTML CSS 背景图居中属性background-position
HTML CSS背景图居中(无序列表) --背景重复:backgroung-repeat:--no-pepeat:不重复--repeat-x:水平水平方向平铺; --repeat-y:垂直方向平铺-- ...
html图片撑开盒子,css背景图撑开盒子高度
本文原地址需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...
css 背景图怎么设置自动填充满_CSS-布局与定位
首先回顾一下上一篇中的最后效果展示现在我们继续往后做首先看一下最终效果图先来做一个背景图吧第一步: 下载原图(或者可以自己设置想要的背景图) 在resume文件夹中创建一个新的文件夹img,专 ...
vue 打包css路径不对_vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
css背景图片高斯模糊_如何将网页CSS背景图高斯模糊且全屏显示
以Path为代表的,展示了这种背景图模糊并全屏显示的方法,而且会根据屏幕分辨率放大缩小. 这种效果应该怎么实现呢? 高斯模糊是PS.FW图片处理工具搞的. 全屏显示的方法 1:使用CSS .bg { ...

CSS背景图和渐变色共存

CSS背景图和渐变色共存

实现

效果

代码

CSS背景图和渐变色共存相关推荐

最新文章

热门文章