One way to add texture and interest to a background and have it stand out more is to add a subtle pattern.

The key is balance, as you don't want the background to stand out too much, and take away from the foreground.

The background property supports the url() function in order to link to an image of the chosen texture or pattern.

The link address is wrapped in quotes inside the parentheses.

练习题目:

Using the url of https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png, set the background of the whole page with the body selector.

练习代码:

<style>
body {
background: url(https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png);
}
</style>

效果:

FCC---Create Texture by Adding a Subtle Pattern as a Background Image的更多相关文章

  1. Book Contents Reviews Notes Errata Articles Talks Downloads Resources Code Formatter Cover of C# in Depth Order now (3rd edition) Implementing the Singleton Pattern in C#

    原文链接地址: http://csharpindepth.com/Articles/General/Singleton.aspx#unsafe Implementing the Singleton P ...

  2. Implementing the Singleton Pattern in C#

    Table of contents (for linking purposes...) Introduction Non-thread-safe version Simple thread safet ...

  3. Singleton Design Pattern

    The Singleton pattern is one of the simplest design patterns, which restricts the instantiation of a ...

  4. cocos2d-x载入texture

    转自:http://blog.csdn.net/aa4790139/article/details/8107325 SpriteTestLayer.cpp(就只改了这个这个文件) #include & ...

  5. OpenGL之纹理贴图(Texture)

    学习自: https://learnopengl-cn.github.io/01%20Getting%20started/06%20Textures/ 先上一波效果图: 实际上就是:画了一个矩形,然后 ...

  6. 【OpenGL】纹理(Texture)

    纹理是一个2D图片(也有1D和3D),它用来添加物体的细节:这就像有一张绘有砖块的图片贴到你的3D的房子上,你的房子看起来就有了一个砖墙.因为我们可以在一张图片上插入足够多的细节,这样物体就会拥有很多 ...

  7. Using XSLT and Open XML to Create a Word 2007 Document

    Summary: Learn how to transform XML data into a Word 2007 document by starting with an existing docu ...

  8. A Pattern Language for Parallel Application Programming

    A Pattern Language for Parallel Application Programming Berna L. Massingill, Timothy G. Mattson, Bev ...

  9. unity读取Texture文件并转为Sprit

    using System.Collections; using System.Collections.Generic; using System.IO; using UnityEngine; usin ...

随机推荐

  1. python子类如何继承父类的实例变量?

    类型1:父类和子类的实例变量均不需要传递 class A(object): def __init__(self): self.name = "cui" def get_name(s ...

  2. 更小的GIS数据格式-Geobuf

    背景 我们经常遇到直接传输gis数据到前端展示的时候,有时候数据量一稍微多点,传输速度就减慢,因为我们用于传输的json格式比较大. Geobuf介绍 Geobuf是一种用于地理数据的紧凑二进制编码. ...

  3. C# 扩展类与分布类

    一.扩展类 //定义扩展方法 public static class ExtsionString { public static string GetTop10(this string value) ...

  4. Docker安全扫描工具之DockerScan

    前言 本篇简单介绍Docker扫描工具DockerScan的安装使用.下述过程是在CentOS 7.6的虚拟机上进行的. [root@localhost ~]# cat /etc/redhat-rel ...

  5. Java程序员月薪三万,需要技术达到什么水平?

    最近跟朋友在一起聚会的时候,提了一个问题,说 Java 程序员如何能月薪达到二万,技术水平需要达到什么程度?人回答说这只能是大企业或者互联网企业工程师才能拿到.也许是的,小公司或者非互联网企业拿二万的 ...

  6. IT兄弟连 HTML5教程 使用盒子模型的浮动布局

    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 倒影

    在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...

  8. 【nagios监控】基于linux搭建nagios监控

    nagios工作原理 nagios的功能是监控服务和主机,但是其自身并不包括这些功能,所有的监控.检测功能都是通过各种插件来完成的. 启动nagios后,它会周期性的自动调用插件去检测服务器状态,同时 ...

  9. RocketMq在SparkStreaming中的应用总结

    其实Rocketmq的给第三方的插件已经全了,如果大家有兴趣的话请移步https://github.com/apache/rocketmq-externals.本文主要是结合笔者已有的rmq在spar ...

  10. Netty服务端NioEventLoop启动及新连接接入处理

    一 Netty服务端NioEventLoop的启动 Netty服务端创建.初始化完成后,再向Selector上注册时,会将服务端Channel与NioEventLoop绑定,绑定之后,一方面会将服务端 ...