草庐IT

《CSS揭秘》读书笔记-条纹背景(一)

博读代码 2023-03-28 原文

背景知识

颜色渐变设置：background: linear-gradient(direction, color-stop1, color-stop2, ...);
指定背景图片大小：background-size: length|percentage|cover|contain;

难题

在网页设计和其他传统媒介中，各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。想要在网页中实现条纹图案，通常我们的方法是创建一个单独的位图文件，然后每次需要做些调整时，都用图像编辑器来修改它。如果我们可以直接在 CSS 中创建条纹图案，那该有多好啊！


解决方案

假设我们有一条基本的垂直线性渐变，颜色从 #fb3 过渡到 #58a（如图1-1）

图1-1


background: linear-gradient(#fb3, #58a);
现在，让我们试着把这两个色标拉近一点（参见图1-2）

图1-2


渐变现在出现在总高的 60% 区域，剩下的部分显示为实色，色标的位置用虚线标示出来了。

background: linear-gradient(#fb3 20%, #58a 80%);

现在容器顶部 20% 的区域被填充为 #fb3 实色，而底部 20% 区域被填充为 #58a 实色，真正的渐变只出现在容器 60% 的高度区域。


如果我们把两个色标继续拉近（分别改为 40% 和 60% ，参见图1-3），那真正的渐变区域就变得更窄了。


你是不是开始好奇，如果我们把两个色标重合在一起，会发生什么？

图1-3

渐变现在出现在总高的 20% 区域，剩下的部分显示为实色，色标的位置用虚线标示。

background: linear-gradient(#fb3 50%, #58a 50%);

图1-4


我们在图1-4 中可以看到，已经没有任何渐变效果了，只有两块实色，各占据了 background-image 一半的面积。

​

本质上，我们已经创建了两条巨大的水平条纹。因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸：

background: linear-gradient(#fb3 50%, #58a 50%);background-size: 100% 30px;

图1-5


在图 1-5 中可以看到，我们把这两条条纹的高度都缩小到了 15px 。由于背景在默认情况下是重复平铺的，整个容器其实已经被填满了水平条纹。


我们还可以用相同的方法来创建不等宽的条纹，只需调整色标的位置值即可。

background: linear-gradient(#fb3 30%, #58a 30%);background-size: 100% 30px;

为了避免每次改动条纹宽度时都要修改两个数组，我们可以再次从规范那里找到捷径。


“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置会被设置为它前面所有色标位置值的最大值。”

图1-6

这意味着，如果我们把第二个色标的位置值设置为 0，那它的位置就总会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。因此下面代码会产生跟图 1-6 一样的条纹背景。


如果要创建超过两种颜色的条纹，也是很容易的。举例来说，下面的代码可以生成三种颜色的水平条纹（参考图1-7）

background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;

图1-7

以上就是本期使用 CSS 创建条纹背景的实践分享，希望对大家有帮助。


下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！

条纹笔记sectionspanstylecss背景图视觉设计Html/CSS前端开发私藏项目实操分享

有关《CSS揭秘》读书笔记-条纹背景(一)的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  3. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  6. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  7. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  8. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  9. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  10. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

随机推荐