程序员经验分享-hwhale

7个实用的CSS background-image小技巧

2023-05-16

（推荐教程：CSS教程）

background-image可能是我们所有人（前端开发人员）在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像没有什么不寻常的，但经过研究，答案并非如此。

所以本文收集了7个我认为最有用的技巧，并创建了一些代码示例，你可以在其中查看正在发生的事情。

1、将背景图像完美适配视口

让我们从比技巧更技巧的地方开始。 有多少次你不得不与你的背景图像斗争，以使其完美契合且又没有拉伸感和吸引力的情况？

这里向你展示如何使你的背景图片始终完全适合浏览器窗口！

1.png

css

body {
  background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

事例源码：https://codepen.io/duomly/pen/xxwYBOE

2、在CSS中使用多个背景图片

嗯，如果我想在背景中添加一个以上的图像怎么办？

这是可能的，也不是很难，但是当你有了将两个图形混合成美丽的东西的想法时，可以得到一个不错的结果。

当我们想要在背景图像的顶部添加图案时，它是非常有用的，所以将在这个例子中向你展示这一点。

2.png

CSS3 中可以直接 指定多个背景路径，如下所示：

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

事例源码：https://codepen.io/duomly/pen/eYpVoJR

3、创建三角背景图像

另一个很酷的CSS背景图片技巧是三角形背景图片。它创造了非常漂亮的效果，尤其是当我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时。

思路是这样的，首先创建两个div，然后将两个背景都添加到其中，然后，第二个div使用clip-path属性画出三角形。

3.png

html

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

css

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}

事例源码：https://codepen.io/duomly/pen/RwWQmwW

4、在背景图像上添加叠加渐变

有时我们想在背景上添加一些文字，但有的图片太亮，导致字看不清楚，所以这里我们就需要让背景图叠加一些暗乐来突出文字效果。

例如，可以通过添加粉红橙色渐变或红色至透明渐变来增强日落图像，这些情况下使用叠加的渐变就很容易做到。

4.png

让我们看看如何轻松地向背景图像添加渐变叠加！

css

body {
  background-image: 
    linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
    url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center
}

事例源码：https://codepen.io/duomly/pen/rNOJgQE

5、创建变色背景图像动画

如果你能决定用哪种颜色作为背景图片的覆盖层会怎么样?那么背景图像上的动画是非常有用的。

使用一个动画叠加可以给你的网站一个伟大的最终效果，当然，人们会记住它。

让我们看看在CSS中使用背景图像和动画可以做什么！

5.gif

css

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
}

@-webkit-keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%)
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  }
}

body {
   background-image: url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

事例源码：https://codepen.io/duomly/pen/gOavNOv

6、制作网格背景图片

有时候会遇到一些需要有艺术或者摄影类的项目，他们一般要求网站要有艺术信息，要有创意。网络的背景就挺有创意的，效果如下:

6.png

HTML

<body>
<div class="container">
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
</div>
</body>

scss

body {
 margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  display: grid;
  grid-template-columns: 25fr 30fr 40fr 15fr;
  grid-template-rows: 20fr 45fr 5fr 30fr;
  grid-gap: 20px;
  .item_img {
    background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
}

事例源码：https://codepen.io/duomly/pen/MWaQNWb

7、将背景图像设置为文本颜色

使用background-image与 background-clip ，可以实现背景图像对文字的优美效果。 在某些情况下，它可能非常有用，尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的情况。

7.png

HTML

<body>
  <h1>Hello world!</h1>
</body>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
  font-family:Arial, Helvetica, sans-serif;
}

h1 {
   background-image: url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

事例源码：https://codepen.io/duomly/pen/wvKyVjG

英文原文地址：https://dev.to/duomly/discover-7-amazing-tips-and-tricks-about-the-css-background-image-39b0

作者：ryanmcdermott

更多编程相关知识，请访问：编程入门！！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

7个实用的CSS background-image小技巧 的相关文章

  • 如何巧用 canvas（画布）为图片加水印？

    在前端中 xff0c 如何巧用 canvas xff08 画布 xff09 为图片加水印 xff1f 下面本篇文章就来给大家介绍一下使用 canvas 给图片添加水印的方法 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c

  • EKF（扩展卡尔曼滤波）参数理解

    EKF VELNE NOISE xff1a 速度在坐标轴 NE 方向上的噪声 通常是在 0 上下波动 设置方法 xff1a 将飞机上电静置若干分钟 xff08 时间尽量长一点 xff09 记录飞 行日志 xff0c 由 EKF3 的 IVN

  • 详解HTML文档声明（DOCTYPE）

    HTML文档通常以类型声明开始 xff0c 该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型 本文将详细介绍文档声明DOCTYPE 特点 文档声明必须是HTML文档的第一行 且顶格显示 xff0c 对大小写不敏感 因为任何放在DOC

  • CSS 不定宽高的垂直水平居中（9种方法）

    垂直居中 xff0c 在 CSS 中是一个老生常谈的问题 xff0c 面试的时候也会时常被提及 所以 xff0c 今天我们就来聊聊 9 种不同的居中方法 有常见的 flex transform absolute 等等 也有 CSS3 的网格

  • html5不常用标签应用场景

    作为一个前端开发 xff0c 在浏览别人家的页面时总是会习惯性的查看他们页面的源码 xff0c 发现大多数网站的页面 xff0c 包括我自己写的页面中用到的最多的布局元素无外乎就是div p span ul dl ol li dt dd s

  • HTML的16个全局属性介绍

    在HTML中 xff0c 属性能表达相当丰富的语义 xff0c 而且属性也会额外提供很多实用的功能 xff0c HTML共支持16个常见的全局属性 HTML原有属性 accesskey 作用 xff1a 浏览器用来创建激活或聚焦元素的快捷键

  • 聊聊JavaScript作用域

    几乎所有的语言都有作用域的概念 xff0c 简单的说 xff0c 作用域就是变量和函数的可访问范围 xff0c 即作用域控制在变量和函数的可见性和生命周期 变量作用域 是程序源代码中定义这个变量的区域 1 全局变量拥有全局作用域 xff0c

  • CSS布局方案大全【整理】

    我们在日常开发中经常遇到布局问题 xff0c 下面罗列几种常用的css布局方案话不多说 xff0c 上代码 xff01 居中布局 以下居中布局均以不定宽为前提 xff0c 定宽情况包含其中 1 水平居中 a inline block 43

  • 你必须知道的一些HTML优化技巧

    如何提升Web页面的性能 xff0c 很多开发人员从多个方面来下手如JavaScript 图像优化 服务器配置 xff0c 文件压缩或是调整CSS 很显然HTML 已经达到了一个瓶颈 xff0c 尽管它是开发Web 界面必备的核心语言 HT

  • 常见的CSS图形绘制合集

    展示40多个常见的纯CSS绘制图形 xff0c 效果实时 xff0c 含源代码 xff0c 想要什么效果直接复制粘贴就好了 就算项目用不到 xff0c 看看别人代码怎么写的也有助于提高CSS的基本功 以下这些造型简单的图形都是纯CSS外加一

  • 扩展Vue.js组件

    您的Vue应用程序中是否有共享类似选项的组件 xff0c 甚至模板标记 使用公共选项和标记创建基本组件 xff0c 然后扩展基本组件以创建子组件 xff0c 这是一个好主意 这样的体系结构将帮助您在代码中应用DRY原则 不要重复您自己 xf

  • Node.js日志记录指南

    当你开始用 JavaScript 进行开发时 xff0c 可能学到的第一件事就是如何用 console log 将内容记录到控制台 如果你去搜索如何调试 JavaScript xff0c 会发现数百篇博文和 StackOverflow 文章

  • 软件测试的测试方法及测试流程

    一 测试方法 xff1a 白盒测试 xff1a 把软件比作一个打开的盒子 xff0c 可以看到软件代码的实现 xff0c 针对代码的实现验证代码是否存在问题 单元测试阶段采用的测试方法 灰盒测试 xff1a 介于白盒和黑盒测试之间 灰盒测试

  • 18个用于创建漂亮图表的JavaScript库推荐

    几乎不可能想象没有图形和图表的任何仪表盘 它们快速有效地呈现复杂的统计数据 此外 xff0c 一个好的图表还可以增强网站的整体设计 在本文中 xff0c 我将向您展示一些用于图形和图表的最佳JavaScript库 这些库将帮助您为将来的项目

  • JavaScript基础--引用数据类型 (对象)

    本文主要讲述了JavaScript对象的属性和对象的引用 xff0c 以及对象的读取 赋值 删除和获取对象键名的操作 1 对象 对象就是一组 键值对 xff08 key value xff09 的集合 xff0c 是一种无序的复合数据集合

  • javascript面向对象设计

    javascript和java语言不一样 xff0c 它没有类这个说法 xff0c 更没有子类父类一说 xff0c 所以它所谓的继承机制 xff0c 也是和其他语言完全不同的 创建对象三种方式 1 最简单的方式 xff0c 创建一个obje

  • 关键CSS和Webpack：自动最小化渲染阻止CSS

    消除渲染阻止的JavaScript和CSS 这是我始终坚持使用的Google Page Speed Insights建议 Google建议您在页面加载准备就绪时将最初需要的CSS 内插 CSS内嵌并加载CSS的其余部分 当访问web页面时

  • 如何用SASS编写可重用的CSS

    Sass是一个CSS预处理程序 xff0c 它在前端工程师的工具箱中变得至关重要 Sass之所以流行 xff0c 是因为它修复了几个CSS缺陷 相关推荐 xff1a css在线手册 这也是Bootstrap 4运行的基础 这意味着为了理解如

  • JS 变量的作用域及闭包

    与闭包有关的概念 xff1a 变量的作用域和变量的生存周期 下面本篇文章就来给大家介绍一下JS中变量的作用域及闭包 xff0c 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 一 变量的作用域 1 变

  • 理解JavaScript中的变量、范围和提升

    变量是许多编程语言的基本组成部分 xff0c 也是新手需要学习的第一个也是最重要的概念 JavaScript中有许多不同的变量属性 xff0c 以及命名变量时必须遵循的一些规则 在JavaScript中 xff0c 有三个关键字用于声明变量

随机推荐

  • 用于VueJS和Webpack的代码分割模式

    拆分单个页面应用程序的代码是提高其初始加载速度的一个很好的方法 由于用户不必一次性下载所有代码 xff0c 他们将能够更快地看到页面并与页面进行交互 这将提高用户体验 xff0c 特别是在移动领域 xff0c 这是搜索引擎优化的一个胜利 x

  • javascript掌握正则表达式

    正则表达式 xff08 英语 xff1a Regular Expression xff0c 在代码中常简写为regex regexp或RE xff09 使用单个字符串来描述 匹配一系列符合某个句法规则的字符串搜索模式 我想正则表达式之所以难

  • 知道要测试什么——Vue组件单元测试

    关于单元测试Vue组件 xff0c 我看到的最常见的问题是 我到底应该测试什么 虽然测试过多或过少都是可能的 xff0c 但我的观察是 xff0c 开发人员通常会在测试过多时犯错误 毕竟 xff0c 没有人愿意成为一个组件测试不足导致应用程

  • 软件测试 | 测试开发书单 | 测试工程师必读经典好书，你读过几本？

    测试好书1080 480 46 3 KB 软件测试入行容易进阶难 在持续交付体系背景下 xff0c 要成为测试开发高手意味着非常系统综合的知识储备 广泛阅读经典好书是快速成长的必要方式 霍格沃兹测试学院重点推荐几本测试经典好书以及必读清单

  • 使用webpack提升vue.js应用程序的四种方法

    Webpack是开发Vue js单页面应用程序的必要工具 通过管理复杂的构建步骤 xff0c 它使您的开发工作流更加简单 xff0c 并且可以优化应用程序的大小和性能 在本文中 xff0c 我将解释Webpack提升Vue应用程序的四种方法

  • 了解Node.js中的流（Stream）

    Node js 中的流 xff08 Stream xff09 是出了名的难用甚至是难以理解 用 Dominic Tarr 的话来说 xff1a 流是 Node 中最好的 xff0c 也是最容易被误解的想法 即使是 Redux 的创建者和 R

  • 深入了解Vue.js的作用域插槽

    作用域槽是Vue js的一个有用特性 xff0c 它可以使组件更加通用和可重用 唯一的问题是它们很难理解 试着让你的头在父母和孩子的范围内交织 xff0c 就像解决一个棘手的数学方程 当你不能很容易地理解某件事时 xff0c 一个好的方法是

  • JavaScript常用基础算法

    一个算法只是一个把确定的数据结构的输入转化为一个确定的数据结构的输出的function 算法内在的逻辑决定了如何转换 基础算法 一 排序 1 冒泡排序 冒泡排序function bubbleSort arr for var i 61 1 l

  • HTML中的meta标签属性的使用

    之前学习前端中 xff0c 对meta标签的了解仅仅只是这一句 lt meta charset 61 34 UTF 8 34 gt 但是打开任意的网站 xff0c 其head标签内都有一列的meta标签 下面我们就来详细介绍一下meta标签

  • 移动端H5开发常用小技巧（总结）

    本篇文章给大家整理一些在移动端H5开发常见的问题给大家做下分享 xff0c 这里很多是在开发过程中遇到的大坑或者遭到过吐糟的问题 xff0c 希望能给大家带来或多或少的帮助 html 篇 常用的meta属性设置 meta对于移动端的一些特殊

  • JavaScript中Switch语句的使用方法

    除了if else之外 xff0c JavaScript还有一个称为switch语句的功能 switch是一种条件语句 xff0c 它将针对多种可能的情况评估表达式 xff0c 并根据匹配的情况执行一个或多个代码块 switch语句与包含许

  • 如何构建可运行的JavaScript规范

    编程不仅仅是给计算机下达如何完成一项任务的指令 xff0c 它还包括以一种精确的方式与他人交流思想 xff0c 甚至是与未来的自己 这样的交流可以有多个目标 xff0c 也许是为了共享信息 xff0c 或者只是为了更容易地修改 如果你不理解

  • javascript中函数的5个高级技巧

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数对任何一门语言来说都是一个核心的概念 xff0c 在javascript中更是如此 本文将深入介绍函数的5个高级技巧 作用域安全的构造函数 构造函数其实就是一个使用new操作符

  • 理解JavaScript中的原型和继承

    本文主要讲了原型如何在JavaScript中工作 xff0c 以及如何通过 Prototype 所有对象共享的隐藏属性链接对象属性和方法 xff1b 以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值 介绍 JavaScrip

  • 大学毕业后转行软件测试我后悔了

    来自一篇新学员的留言 大学本科幼师专业 xff0c 家里人都想让我考教师资格证 xff0c 等毕业了当一名人民教师 xff0c 说这个职业是一辈子的铁饭碗 xff0c 风吹不着雨淋不到 xff0c 还有寒暑假 xff0c 找个离家近的 xf

  • 分享5个JS函数的高级技巧

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数对任何一门语言来说都是一个核心的概念 xff0c 在javascript中更是如此 本文将深入介绍函数的5个高级技巧 作用域安全的构造函数 构造函数其实就是一个使用new操作符

  • 详解vue.js中watch的使用

    在vue中 xff0c 使用watch来响应数据的变化 watch的用法大致有三种 下面代码是watch的一种简单的用法 xff1a lt input type 61 34 text 34 v model 61 34 cityName 34

  • Vue中值得关注的21个开源项目（推荐）

    Vue 相对不于 React 的一个优点是它易于理解和学习 xff0c 且在国内占大多数 咱们可以在 Vue 的帮助下创建任何 Web 应用程序 因此 xff0c 时时了解一些新出现又好用的Vue 开源项目也是挺重要 xff0c 一方面可以

  • javaScript面向对象的三个基本特征介绍

    了解过面向对象的同学应该都知道 xff0c 面向对象三个基本特征是 xff1a 封装 继承 多态 xff0c 但是对于这三个词具体可能不太了解 对于前端来讲接触最多的可能就是封装与继承 xff0c 对于多态来说可能就不是那么了解了 封装 在

  • 7个实用的CSS background-image小技巧

    xff08 推荐教程 xff1a CSS教程 xff09 background image可能是我们所有人 xff08 前端开发人员 xff09 在我们的职业生涯中至少使用过几次的CSS属性之一 大多数人认为背景图像没有什么不寻常的 xff

热门标签