freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md
Oliver Eyton-Williams ee1e8abd87
feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-12 19:31:00 -07:00

1.3 KiB

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
587d78a5367417b2b2512ad8 通过添加细微图案作为背景图像来创建纹理 0 https://scrimba.com/c/cQdwJC8 301052 create-texture-by-adding-a-subtle-pattern-as-a-background-image

--description--

为了增加背景图的质感,我们可以为它添加一个不那么明显的纹理图案,这样可以让页面更讨喜。但关键在于,我们需要找到一个平衡点,因为我们不希望背景图抢占了内容的风头,造成喧宾夺主的结果。background 属性支持使用 url() 函数作为属性值,这让我们可以通过链接的方式引入纹理或样式的图片。图片链接的地址应写在括号内,一般会用引号包起来。

--instructions--

选取 body 元素,并设置整个页面的 background 为 url https://i.imgur.com/MJAkxbh.png 的图片。

--hints--

body 元素选择器应包含 background 属性,且属性值应为给定的 url

assert(
  code.match(
    /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
  )
);

--seed--

--seed-contents--

<style>
  body {

  }
</style>

--solutions--

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