背景设置多个图片和渐变色

已于 2022-07-28 14:51:26 修改
阅读量370 收藏
点赞数
文章标签： html5
于 2022-02-14 15:17:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/reverb_/article/details/122925131
版权

这里设置两种背景图片，一张图片在顶部，一张在底部，蓝色渐变

background: url("../img/background/bg-bottom-page.png") no-repeat bottom center ,
    url("../img/background/bg-top-page.png") no-repeat top center, linear-gradient(#0261E5, #0047A1);
background-size: 100% auto, 100% auto, 100% 100%;

reverb_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android开发——背景两种颜色渐变效果
七天不过夜的专栏
06-29 1132
前言 在Android开发当中，我们肯定会接到有业务需求是：让APP的某一些背景颜色产生渐变效果。那我们应该怎么去实现呢？接下就是我要为大家介绍的了。 效果图 这是需求要达到的效果。接下来说一下是怎么实现的吧！ 实现步骤 第一步：在res/drawable中创建一个名称bg_grdient.xml（名称看个人） <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android
用css设置多段背景色
songxiao1124的博客
09-02 4201
同一个div种用css设置多段背景色，使多种颜色拼接 background-image: linear-gradient(90deg, #fb3 0, #fb3 50%, #3ef784 0, #3ef784 60%, #029eef 0, #029eef) 50% 第一个颜色占比，终止 10% 第二个颜色占比，终止在60% 40% 第三个颜色占比，终止在100% 颜色后面的是终止位置 ...
CSS linear-gradient 实现背景双色或多色，背景一半变色
热门推荐
FengChen的进阶之路
12-22 1万+
linear-gradient： 第一个参数：方向（可以为角度） 第二至多个参数：颜色 占比（可有可无） 至下一个参数颜色渐变 background: linear-gradient(to bottom, white 0%, white 75%, #F49602 75%, #F49602 100%); //背景色调整，上部分白，下部分黄 background: linear-gradient(to bottom, white 0%, white 75%, #F49602 75%, #F49602 10
background系列属性（background-color背景颜色、background-image背景图片、background-repeat重复方式以及background-position）
m0_71814235的博客
07-07 1186
background系列属性（background-color背景颜色、 background-image背景图片以及background-position背景定位）
css background的多种属性详解
huanglei201502的博客
01-28 388
转自：https://blog.csdn.net/web_xiaolei/article/details/78226830 css的background属性由以下属性组成： background-color：背景色 background-image：背景图片 background-size：背景图片尺寸 background-repeat：背景图片重复(repeat,repeat-x,repe...
背景渐变颜色
qq_61838861的博客
02-06 597
左边线性渐变，右边径向渐变，观察比较 （1）background: linear-gradient(pink,skyblue); //从上粉到下蓝 各占50% background: radial-gradient(pink,skyblue); （2）background: linear-gradient(to top,pink,skyblue); //第一个是代表方向---从下粉到上蓝 (3)background: linear-gradient...
Android：图片背景渐变切换与图层叠加的实现
books1958的专栏
01-29 5058
本例要实现的目的： 1.图片背景渐变的切换，例如渐变的从红色切换成绿色。 2.代码中进行图层叠加，即把多个Drawable叠加在一起显示在一个组件之上。
background 两种颜色分割
weixin_43977067的博客
06-03 4712
background: linear-gradient(to right, red 50%, blue 50%); /用linear-gradient这个属性，to后面跟方向 (right是指向右)后面跟分割的颜色和所占div的百分比/
Android编程实现图片背景渐变切换与图层叠加效果
01-20
2.代码中进行图层叠加，即把多个Drawable叠加在一起显示在一个组件之上。 效果图： 代码很简单： （1）布局文件： <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:tools=...
绿色透明渐变背景毕业答辩PPT模板
07-15
毕业答辩PPT模板封面，使用了绿色渐变作为底图，右侧5个透明的多色曲线进行叠加作为背景图片，非常精致。在左侧使用白色黑体文字，填写毕业答辩标题、答辩人、导师、专业等信息。 毕业答辩幻灯片模板内容页面，使用...
蓝绿渐变方形背景的工作汇报PPT模板
07-17
PPT模板封面使用了多个蓝绿渐变的方形背景图片。右侧填写工作汇报PPT标题。界面风格简洁实用。 PowerPoint模板内容页，由22张蓝色绿色配色的幻灯片图表，搭配PPT文字排版。 本模板适合用于制作工作总结PPT，工作汇报...
绿色透明渐变背景毕业答辩PPT模板.zip
07-16
毕业答辩PPT模板封面，使用了绿色渐变作为底图，右侧5个透明的多色曲线进行叠加作为背景图片，非常精致。在左侧使用白色黑体文字，填写毕业答辩标题、答辩人、导师、专业等信息。 毕业答辩幻灯片模板内容页面，使用...
css背景渐变和背景相关属性
Z1529074的博客
07-29 114
线性渐变： background-image:linear-gradient(red, blue); /* 标准的语法*/ background: linear-gradient(to bottomright, red , blue); /* 标准的语法*/ background: linear-gradient(180deg, red,blue); /* 标准的语法*/ 径向渐变：向四周扩散的渐变，默认为椭圆状，出发点为中心 语法:background/background-image :r
CSS3-设置背景图片固定大小 其余部分用固定颜色填充
weixin_44622984的博客
07-10 2205
##CSS 设置背景图片固定大小 无论屏幕如何增大 背景图片保持中间 多余两边用颜色填充,适应各种大屏幕及拉伸 .test-img{ background-image: url("./XXX.png"); background-position: center; background-size: contain; background-repeat: no-repeat; background-color: rgb(116,177,255); } 中间粉色部分
15【背景 渐变色】
DSelegent的博客
08-02 6352
15【背景 渐变色】
html背景左右渐变,css 背景 上下渐变 左右渐变
weixin_36081148的博客
06-24 2782
css 背景 上下渐变 左右渐变上下渐变.top{background-color:#d2d2d2;background-image:-webkit-gradient(linear,00,0100%,from(#f8f8f8),to(#c2c2c2));background-image:-moz-linear-gradient(#f8f8f8,#c2c2c2);backgro...
背景颜色渐变 background
MDR_0820的博客
10-09 891
背景颜色渐变 background background: -webkit-linear-gradient(起始方向，颜色1 ，颜色2，…） background: -webkit-linear-gradient(left,pink,skyblue); 兼容问题 背景渐变必须要添加浏览器私有前缀-webkit 起始方向可以是 方位名词或者是度数 也可以省略 默认是top 从上往下渐变 <style> div{ width: 800px
background背景色从左到右渐变
Wang_MengHan的博客
03-02 483
background: -webkit-linear-gradient(left, rgb(255,170,170,0),rgba(255,170,170,.5),rgb(255,170,170,0));
【html5】04-操作DOM元素
最新发布
m0_68467925的博客
05-19 912
dom获取单个、多个元素；类名操作： Dom.classList.add("类名"): 给当前dom元素添加类样式 Dom.classList.remove("类名");classList.contains("类名"); classList.toggle("active"); 自定义属性的获取与设置
css 渐变色和背景图片
08-12
CSS 渐变色和背景图片是用于美化网页的常见技术。下面是对这两个技术的简要介绍： 1. 渐变色（Gradient）：CSS 渐变色可用于创建平滑过渡的颜色效果。它可以应用于元素的背景、边框或文本等属性。CSS 提供了两种...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值