首页 \ 问答 \ 需要背景图像按比例覆盖整个标题(Need background image to proportionally cover entire header)

需要背景图像按比例覆盖整个标题(Need background image to proportionally cover entire header)

我正在尝试使我的背景图像覆盖CSS中的整个标题,但是当我使用CSS的“background-size:cover”功能时,只显示我图像的顶部。 如何让我的整个图像显示在标题的背景中? 提前致谢!

CSS:

header {
  background: url("file:///Users/FilePath/image.jpg");
  background-size: cover;
  color: white;
  padding: 10px;
  text-align: center;
  border-bottom-style: ridge;
  border-bottom-width: 5px;
}

HTML:

<html>
  <title>My Page</title>
  <body>
    <header>
      <h1>Hello World</h1>
   </header>
   <section>
     <p> My First Section </p>
   </section>
  </body>
</html>

I'm trying to make my background image cover my entire header in CSS, but only the top part of my image is showing when I use the "background-size: cover" feature of CSS. How would I make my entire image show in the background of the header? Thanks in advance!

CSS:

header {
  background: url("file:///Users/FilePath/image.jpg");
  background-size: cover;
  color: white;
  padding: 10px;
  text-align: center;
  border-bottom-style: ridge;
  border-bottom-width: 5px;
}

HTML:

<html>
  <title>My Page</title>
  <body>
    <header>
      <h1>Hello World</h1>
   </header>
   <section>
     <p> My First Section </p>
   </section>
  </body>
</html>

原文:https://stackoverflow.com/questions/33530746
更新时间:2022-03-06 13:03

最满意答案

我建议简单地将对象放在System.Collections.Generic.Dictionary<string, your object type>列表中。 如果我正确理解了问题,它会提供您正在寻找的确切功能。


I would suggest to simply put the objects in a System.Collections.Generic.Dictionary<string, your object type> list. It provides the exact functionality you are seeking if I understand the question correctly.

相关问答

更多
  • 这在很大程度上取决于您使用的数据库类型。 因为笛卡尔数学比地理空间数学快得多,所以查询可能将坐标看作是在平面而不是在球体上。 文档以这种方式解释: 大多数人都熟悉使用纬度和经度来引用地球表面上的位置。 但是,纬度和经度是角度,而不是距离。 换句话说,虽然平坦表面上的两个点之间的最短路径是直线,但是曲面(例如地球)上的两个点之间的最短路径是大圆弧。 因此,需要额外的计算来获得平面单元中的距离(例如,千米和英里)。 使用地理坐标系可能会在以后为开发人员带来复杂性。 例如,Spatialite不具有使用地理坐标系 ...
  • 使用包含 例如 if ( $(".node_category h3:contains('orange')").size() > 0 ) { //if there is any node_category which has h3 that contains orange } DEMO var searchTerms = ["apple", "banana"]; searchTerms.forEach( function(value){ $(".node_c ...
  • 一种解决方案是声明一个Map phoneCount ,它将一个电话号码作为密钥,并将对该号码的呼叫数量作为值。 然后,您将遍历PhoneCall对象的ArrayList并构建映射。 具有最大价值的记录是您正在寻找的记录。 One solution would be to declare a Map phoneCount which would hold a phone number as the key and the number of ...
  • 至于你只有打印最高分数信息的乐队的问题: 创建一个全局变量(在这种情况下,我把它称为整数),然后编辑你的循环: for (int i = 0; i < bands.length; i++) { if (bands[i].getScore() > maxValue) { maxValue = bands[i].getScore(); winningBand = i; } } 然后,当您写入文件时,只写出winsBand: try { FileWriter fw = ...
  • 你必须有“最后一个孩子是男孩”还是“有孩子是个男孩”? 这将适用于后者: Parent.includes(:child).where("children.gender = 'boy' or parents.volunteer = 'yes'") 对于最后一个孩子是男孩:这相当于你在SQL中需要的东西,你可以使用find_by_sql来使其工作或使用rails语法或Arel创建类似的东西。 select p.* from parents p inner join (select parent_id, ge ...
  • 为了让答案变得通用和清晰,我将假设Item模型是: struct Item { var email = "" } 请考虑输出应该是包含仅包含有效电子邮件的项目的已过滤项目数组。 对于这样的功能,您应该使用NSRegularExpression : NSRegularExpression类用于表示正则表达式并将其应用于Unicode字符串。 此类的实例是已编译的正则表达式模式和各种选项标志的不可变表示。 根据以下功能: func isMatches(_ regex: String, _ string ...
  • 对于第一个问题,你可以使用ClassUtil库 。 请注意,它会找到Java类,而与object相对应的名称将以$class结尾。 另请参阅Scala反射 - 根据特征加载或查找类 。 对于第二个, object在Scala反射中被称为“模块” ,所以你不需要isSingletonObject(name) ; 如果不是, rm.staticModule(name).asModule将失败。 似乎没有办法检查它是否是编译器生成的空伴侣对象( isSynthetic返回false),但它们将isSyntheti ...
  • 要获得第二级,您可以使用has_many:through例如: class Discussion < ActiveRecord::Base has_many :posts end class Forum < ActiveRecord::Base has_many :discussions has_many :posts, through: :discussions end # get all posts in all discussions in the forum. Forum.find( ...
  • 我建议简单地将对象放在System.Collections.Generic.Dictionary列表中。 如果我正确理解了问题,它会提供您正在寻找的确切功能。 I would suggest to simply put the objects in a System.Collections.Generic.Dictionary list. It provides the exact functionali ...
  • 我认为如果在自定义对象的IsEqualTo方法中定义相等条件会更好。 所以这样的事情: $myObject = New-Object PSObject $myObject | Add-Member -MemberType NoteProperty -Name Name -Value $name $myObject | Add-Member -MemberType NoteProperty -Name Schema -Value $schema $myObject | Add-Member -MemberTy ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)