草庐IT

CSS把图片设置为背景

温其如玉_zxh 2024-07-22 原文

前言

先列出几种常用的搭配，方便 CV，想了解具体的可以看后面详细介绍

第 1 组：刚好填充整个背景区域，不重复

background-image: url("~@/路径");
background-size: cover;
background-repeat: no-repeat;

第 2 组：从左上角开始，垂直水平重复填充

background-image: url("~@/路径");
background-size: 30px auto; // 宽度 30px ，高度自适应

一、图片路径：background-image

引入图片，注意路径前面需要加 ~ 符

background-image: url("~@/路径");

二、图片大小：background-size

指定背景图片的大小，可以设置具体数值、百分比、cover、contain

  • 具体数值：指定宽高
  • 百分比：按图片自身大小的百分比显示，100% 表示原图大小
  • cover：宽高比不变，图片缩放为刚好覆盖背景区域的最小大小
  • contain：宽高比不变，图片缩放为适合背景区域的最大大小
background-size: 100px 100px; // 可以只设置一个数值，未设置的值默认为 auto
background-size: 100% 100%; // 可以只设置一个数值，未设置的值默认为 auto
background-size: cover;
background-size: contain;

三、是否重复：background-repeat

当图片宽高小于背景时，如何设置重复情况，默认 x轴、y轴都重复

  • repeat：默认值，x轴、y轴都重复
  • repeat-x：仅x轴重复
  • repeat-y：仅y轴重复
  • no-repeat：不重复
  • inherit：继承父元素的属性设置
background-repeat: repeat; // 默认值，垂直水平都重复
background-repeat: repeat-x; // 水平方向重复
background-repeat: repeat-y; // 垂直方向重复
background-repeat: no-repeat; // 不重复
background-repeat: inherit; // 继承父元素

四、起始位置：background-position

设置背景图片的起始位置，默认值为 0%、0%，即左上角

  • 关键字：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom，这个太简单了，就不一一描述了，只需要注意一点，如果只写了一个关键字，另一个默认为 center
  • x% y%：指定百分比，左上角为0%、0%，右下角为100%、100%
  • xpos ypos：指定像素，左上角为0px、0px，如果只写了一个，另一个默认为 50%
  • inherit：继承父元素的属性设置
background-position: center center;
background-position: 50% 50%;
background-position: 0px 0px;

五、能否滚动：background-attachment

背景图片是否可以跟随页面滚动，默认值为 scroll，可以滚动

  • scroll：默认值，背景图片随着页面滚动
  • fixed：背景图片不会随着页面滚动
  • local：背景图片会随着元素内容滚动
  • inherit：继承父元素的属性设置
background-attachment: scroll; // 随页面滚动
background-attachment: fixed; // 不滚动
background-attachment: local; // 随内容滚动

结束

其实还有其它属性，但是使用频率没那么高，就不一一介绍了，想了解的可以去 菜鸟教程 查看

CSS把spancodeclass前端css3

有关CSS把图片设置为背景的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

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

  4. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  5. 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并在看到包时选择

  6. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

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

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

  8. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？ 最佳答案 对于“文本”数

  9. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  10. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

随机推荐