7个实用的CSSbackground-image小技巧

作者：赵lamarta | 来源：互联网 | 2020-11-22 02:28

background-image可能是我们所有人（前端开发人员）在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像没有什么不寻常的，但经过研究，答案并非如此。所以本文收集了7个我认为最有用的技巧，并创建了一些代码示例.

css

body {
  background-image: url(&＃39;https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80&＃39;);
  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中使用多个背景图片

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

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

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

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属性画出三角形。

html

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、在背景图像上添加叠加渐变

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

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

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

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中使用背景图像和动画可以做什么！

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、制作网格背景图片

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

HTML

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(&＃39;https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80&＃39;);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
}

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

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

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

HTML

  Hello world!

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

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

以上就是7个实用的CSS background-image小技巧的详细内容，更多请关注第一PHP社区其它相关文章！

推荐阅读

client
Python 实战：异步爬虫（协程技术）与分布式爬虫（多进程应用）深入解析

本文将深入探讨 Python 异步爬虫和分布式爬虫的技术细节，重点介绍协程技术和多进程应用在爬虫开发中的实际应用。通过对比多进程和协程的工作原理，帮助读者理解两者在性能和资源利用上的差异，从而在实际项目中做出更合适的选择。文章还将结合具体案例，展示如何高效地实现异步和分布式爬虫，以提升数据抓取的效率和稳定性。 ... [详细]

蜡笔小新 2024-11-05 14:12:56
int
Block的运用技巧与关键注意事项

在使用Block时，正确的声明方法和确保线程安全是至关重要的。为了保证Block在堆中分配，应使用`copy`修饰符进行声明，因为栈中的Block与栈的生命周期绑定，容易导致内存问题。此外，还需注意Block捕获外部变量的行为，以避免潜在的循环引用和数据不一致问题。建议深入研究相关文档，以掌握更多高级技巧和最佳实践。 ... [详细]

蜡笔小新 2024-11-05 10:57:33
install
利用树莓派畅享落网电台音乐体验

最近重新拾起了闲置已久的树莓派，这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多，我决定将其重新启用。恰逢落网电台进行了改版，回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐，便萌生了同样的想法。通过一番调试，终于实现了在树莓派上流畅播放落网电台音乐的功能，带来了全新的音乐享受体验。 ... [详细]

蜡笔小新 2024-11-05 09:20:37
int
计算二叉树的直径：深入解析与优化算法

二叉树的直径是指树中任意两个叶节点之间最长路径上的节点数量。本文深入解析了计算二叉树直径的算法，并提出了一种优化方法，以提高计算效率和准确性。通过详细的案例分析和性能对比，展示了该优化算法在实际应用中的优势。 ... [详细]

蜡笔小新 2024-11-05 02:21:46
ip
MongoVUE基础操作指南：轻松上手数据库管理

本文介绍了MongoVUE的基础操作，旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具，虽然需要注册，但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法，并对一些常见的问题进行了修正和补充，确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]

蜡笔小新 2024-11-04 19:52:38
ip
优化后的标题：hCalendar微格式：深入解析事件与时间、地点相关的活动标记方法

本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇，前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记，提高事件信息的可读性和互操作性。 ... [详细]

蜡笔小新 2024-11-04 17:57:52
java
PHP开发人员薪资水平分析：工程师平均工资概况

PHP开发人员薪资水平分析：工程师平均工资概况 ... [详细]

蜡笔小新 2024-11-04 17:10:56
install
【Linux进阶指南】第一阶段第三课：体验与部署Ubuntu系统

在正式踏上Linux学习之旅之前，本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练，你将掌握Ubuntu的基本安装、配置及常用命令，为后续的进阶学习打下坚实的基础。此外，课程还将介绍如何解决常见问题和优化系统性能，帮助你更加高效地使用Ubuntu。 ... [详细]

蜡笔小新 2024-11-04 14:41:20
install
Vue.js 前端框架中使用 vuei18n 实现多语言支持的详细指南

本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码，帮助开发者快速掌握如何在项目中实现国际化功能，提升用户体验。同时，文章还探讨了常见的多语言切换问题及解决方案，为开发人员提供了实用的参考。 ... [详细]

蜡笔小新 2024-11-05 20:00:42
int
如何在 PHPStorm 2017 中禁用参数名称提示功能

在 PHPStorm 2017 中，若需禁用参数名称提示功能，可在设置面板中通过搜索 "hints" 进入相关路径，具体为：编辑器 > 常规 > 外观 > 显示参数名称提示，并取消该选项前的勾选。这一操作将有效关闭参数名称提示，提升代码编辑的整洁度和专注度。 ... [详细]

蜡笔小新 2024-11-05 16:02:49
blob
Golomb 编码解析：利用零位标识商与余数的高效算法

Golomb 编码是一种高效的变长编码技术，专门用于整数的压缩。该方法通过预定义的参数 \( M \) 将输入整数分解为商 \( q \) 和余数 \( r \) 两部分。具体而言，输入整数除以 \( M \) 得到商 \( q \) 和余数 \( r \)，其中商 \( q \) 采用一元编码表示，而余数 \( r \) 则使用二进制编码。这种编码方式在数据压缩和信息传输中具有显著的优势，特别是在处理具有特定概率分布的数据时表现出色。 ... [详细]

蜡笔小新 2024-11-05 14:49:19
utf-8
利用Python高效抓取微博文本与动态网页图像数据

本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码，展示了如何利用爬虫技术获取微博内容和动态图片，为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者，本文具有较高的参考价值。 ... [详细]

蜡笔小新 2024-10-31 14:48:38
utf-8
可转债数据智能抓取与分析平台优化

本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息（排除已发布赎回的债券），并结合安道全教授提出的三条安全线投资策略，新增了建仓线、加仓线和重仓线，以提供更精准的投资建议。 ... [详细]

蜡笔小新 2024-10-30 17:40:17
ip
PyQt5 QTextEdit：深入解析Python中多功能GUI库的应用与实现

本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定，提供了超过 620 个类和 6000 个函数及方法，广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件，支持丰富的文本编辑功能，如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能，还在于其易用性和灵活性，使其成为开发复杂用户界面的理想选择。 ... [详细]

蜡笔小新 2024-10-28 23:56:36
blob
HTML5大文件传输技术深度解析与实践分享

本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析，详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题，并提供了可供参考的代码示例和解决方案。此外，文章还讨论了常见的技术挑战及优化策略，旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]

蜡笔小新 2024-10-28 18:59:50

赵lamarta

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章