草庐IT

CSS的背景版块知识

鱿年年 2023-04-05 原文

😊博主页面：鱿年年

👉博主推荐专栏：《WEB前端》👈

​💓博主格言：追风赶月莫停留，平芜尽处是春山❤️

目录

前言

一、背景颜色

二、背景图片 

三、背景平铺 

四、背景图片位置

4.1参数是方位名词

4.2参数是精确单位

4.3参数是混合单位

五、背景图像固定（ 背景附着）

六、背景的复合写法

七、背景色半透明

八、背景总结

前言

 通过CSS背景属性是可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片设置、背景图像固定等。

一、背景颜色

background-color 属性定义了元素的背景颜色。

background-color：颜色值；

一般情况下元素背景颜色默认值都是（transparent）透明色，我们也可以手动指定背景颜色为透明色。

二、背景图片 

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景。）

background-image ：none | URL（URL）
参数值作用
none无背景图（默认值）
URL使用绝对或者相对地址指定背景图像

三、背景平铺 

 如果需要在HTML页面上对背景图像进行平铺，可以使用background-repent属性。

background-repeat:repeat | no-repeat | repeat-x | repeat-y
参考值作用
repeat背景图像在纵向和横向上平铺（默认值）
no_repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图片在纵向上平铺

 注意：

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色。

四、背景图片位置

利用background-position属性可以改变图片在背景中的位置。

background-position：x y;

参数代表的意思是：x 坐标和y 坐标。可以使用方位名词或者精确单位。

参数值说明
length百分数|由浮点数字和单位标识组成的长度值
positiontop| center| bottom| left| center| right  方位名词

4.1参数是方位名词

如果指定的两个值都是方位名词，则跟两个值前后顺序无关，比如left top 和top left 效果是一致的。

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

4.2参数是精确单位

如果参数值是精确单位，那么第一个肯定是X坐标，第二个一定是Y坐标。

如果只指定一个数值，那么该数值一定是X坐标，另外一个默认垂直居中。

4.3参数是混合单位

如果是指定的两个值是精确单位和方位名词混合使用的话，则第一个值是X坐标，第二个值是Y坐标。

五、背景图像固定（ 背景附着）

background-attachment 属性是设置背景图像是否需要固定或者随着页面的其余部分滚动起来。

在后期的使用场景是 制作视差滚动的效果。

background-attachment ：scroll | fixed
参数作用
scroll背景图像是随对象内容滚动（默认值）
fixed背景图像固定

六、背景的复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定写的顺序是：

background： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

background： transparent URL(image.jpg) repeat-y fixed top ;

这个才是实际开发中书写的代码格式。

七、背景色半透明

CSS3 为我们提供了背景颜色办透明的效果。

background：rgba(0,0,0,0.3);
  •  最后一个参数是alpha 透明度，取值范围在0~1之间。
  • 我们习惯把0.3的0省略掉，写为 back不round：rgba（0,0,0，.3）；
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响的
  • 注：CSS3新增的属性只有是IE9+版本浏览器才支持的
  • 但是现实实际开发中，我们不太关注兼容性写法的，可以放心使用的哦

八、背景总结

属性作用值
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background-image背景图片URL(图片路径）
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是代表 x 和 y 坐标
background-attachment背景附着scroll（背景滚动）/fixed（背景固定）
背景简写书写更简单背景颜色 背景图片地址 背景平铺  背景滚动 背景位置
背景半透明背景颜色半透明background：rgba（0,0,0,0.3）；后面必须是写4个值。

背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。（精灵图也是一种运用场景）

版块CSSxfftd背景图片css$前端$html

有关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. 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

  6. 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:

  7. 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

  8. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  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,

随机推荐