如何“填充”背景图片? [复制]

2024-03-27

I'm making a website where I need to have a notable difference between fill and center background images. My template is this:
Center: Uses native resolution to determine size. enter image description here Fill: Fits sides to fill screen without changing aspect ratio. Two sides exactly fit screen, while other two are cut off. enter image description here

我设法以

.center {
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: center center;
}

但我不知道如何填充。有什么见解吗?


我相信你想要background-size: cover. 其他背景大小选项 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何“填充”背景图片? [复制] 的相关文章

  • 如何用纯JavaScript控制变换距离

    我做的http codepen io adamchenwei pen dOvJNX http codepen io adamchenwei pen dOvJNX 我尝试对 dom 应用某种移动方式 使其移动固定距离并停止 而不是动画并移动穿
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 中心引导表宽度为 100%?

    table class table table striped table hover table responsive table
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • SaSS 循环使用

    我想创建类 将特定边距应用于我的块 例如 standard margin top margin top 10px standard margin bottom margin bottom 10px small margin top larg
  • 无法从代码隐藏更改 CSSClass

    这一定是世界上最简单的事情 但它就是行不通 我有一个外部 div 我想对其应用一个类以使其显示样式 none 以便隐藏其中的所有内容 它实际上是一个 asp panel 元素 所以我假设我可以在后面的代码中设置 control CssCla
  • Javascript 放大/缩小到鼠标 x/y 坐标

    我设法让鼠标拖动来滚动div 但是用鼠标放大 缩小不完整 它有效 但我希望鼠标指针将图像保持在该位置并同时缩放它 如下所示 我需要使用scrollBy 将滚动返回到缩放之前的上一点 有人知道该怎么做吗 这是某人制作的小提琴https jsf
  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com
  • JavaFX 中的 -fx-background-radius 和 -fx-background-insets

    我正在使用 JavaFX 我想自定义一个按钮 我看到了几个可以设计的特征 其中我发现了两个我不认识的人 button fx padding 5 22 5 22 fx border color 121212 fx border width 2
  • 使用过渡+不透明度更改+溢出隐藏时出现问题

    如果您看到我共享的代码示例 您可以看到覆盖层超出了框的范围 我将问题追溯到transition属性 我想删除div之外的内容 溢出没有按预期工作 删除transition有效 但如果可能的话我想保留它 任何帮助表示赞赏 代码笔链接 http
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • 底部页脚的 css 布局,动态 ajax 内容更改页面高度

    Update 实际上 我现在通过放弃固定页脚设计来解决这个问题 动态内容移动页脚并适当调整容器大小似乎没有问题 除非页脚最初固定在浏览器底部 我希望其他人最终能够提供一个兼具两全其美的出色解决方案 I spent all day tryin
  • CSS:如何在模糊的背景上剪切文本?

    我想重新创建以下样式 我想出了以下内容 问题是剪切不会影响模糊滤镜 我不知道如何解决它 这是我的 HTML 代码 glass width 40 height 100 position absolute background rgba 255
  • tr 元素周围的边框不显示?

    Chrome Firefox 似乎不渲染边框tr 但如果选择器是 它会渲染边框table tr td 如何在 tr 上设置边框 我的尝试 不起作用 table tr border 1px solid black table tbody tr
  • 背景大小:封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕

随机推荐

  • 如何在进程的内存中搜索特定字符串?

    我对基础知识感兴趣 我不知道从哪里开始 我创建了这个测试程序 include
  • 如何在 LinqPad 中执行 ODATA 扩展

    我正在使用 LINQPad 连接到本地 CRM 组织上的 ODATA 服务 但我不知道如何使用 LINQPad 执行 联接 或遍历关系 这是我的网址 OrganizationData svc New locationSet select n
  • 如何在 Mac 上安装 NVM

    我尝试使用以下命令在 Mac 上安装 NVM curl o https raw githubusercontent com nvm sh nvm v0 39 1 install sh bash 但是 我收到一条错误消息 语法错误接近意外的
  • MPI+p 线程。程序卡在 MPI_Ssend 和 MPI_Recv 上

    我已经调试了这个程序2周了 它只有 93 行 但我仍然找不到错误 请帮我 这个程序在我的笔记本电脑上运行正常 但是当我在我的实验室 上海超算中心和济南超算中心的集群上运行时 就卡住了 这个程序的逻辑非常简单 有 2 个 MPI 进程 一个是
  • php.ini:哪一个?

    我从旧的 apache 迁移到 nginx 和 php 5 3 10 当我尝试修改 php ini 以满足我的需要时 我发现有 3 个 locate php ini etc php5 cgi php ini etc php5 cli php
  • 如何让 EF 将空字符串保留为 NULL?

    在我的域中 NULL 和空字符串之间没有重要区别 如何让 EF 忽略两者之间的差异并始终将空字符串保留为 NULL 空字符串不是字符串属性的默认值 因此这意味着您的代码正在某处设置空字符串 在这种情况下 您有责任处理 如果您在 POCO 中
  • Windows 安装程序中的主要与次要升级

    是否有任何理由不设置安装 以便始终完成主要升级并更改产品代码 我发现支持不同类型的安装需要更多代码 并且 修复 安装似乎通过重大升级更容易工作 而且需要安装的应用程序不是很大 因此不需要 服务包 或补丁安装程序 不会 如果您的应用程序很小并
  • 使用迭代器将数组划分为大小不等的部分

    我有一个数组 需要将其分为 3 元素子数组 我想用迭代器来做到这一点 但最终我迭代到了数组的末尾并出现段错误即使我没有取消引用迭代器 给定 auto foo 1 2 3 4 5 6 7 8 9 10 我正在做 auto bar cbegin
  • ef4 导致 Web 服务中的循环引用

    我有一个 Reason 对象 public class Reason public virtual long Id get set public virtual string Name get set public virtual Comp
  • php 中的 QR 码,无需使用现已弃用的 Google Charts API

    有谁知道有一个 PHP 类可以在您的服务器上生成二维码 而不是依赖现已弃用的 Google Charts API 该 API 并不总是存在 我还认为 如果在服务器上完成批量 QR 码生成将会更快 我还会考虑使用基于 JS 或 Jquery
  • HTML5 音频回调在 safari/iOS 上失败

    我构建了一个应用程序 旨在通过使用 结束 事件在第一个声音完成时播放每个声音 在我的初始版本中 每个声音都有自己的音频元素 结果如下 function play next audio speaker audio sounds i get 0
  • 如何应用多个 DSC 配置?

    这是我的例子 Config AllNodes NodeName localhost PSDscAllowPlainTextPassword True Configuration LocalAdmin Param String Node lo
  • Gnuplot:多个堆叠直方图,每组使用相同的键

    我正在尝试创建一个具有多个堆叠直方图的图 如示例 8here http gnuplot sourceforge net demo histograms html 但对于我的数据来说 每组都有相同的四个类别 如何更改颜色和键 以便每个堆叠列的
  • 我需要在 Cython 中使用 `nogil`

    我有一些 Cython 代码 我想尽快运行 我需要释放 GIL 才能执行此操作吗 假设我的代码与此类似 import numpy as np trivial definition just for illustration cdef dou
  • 是否有一个 jQuery 自动完成插件可以强制选择一个项目?

    There s 自动完成 http docs jquery com Plugins Autocomplete autocomplete 但它不会强制选择某个项目 我需要这样的东西 但它必须强制选择一个项目 然后才能 提交 它存在吗 您可以使
  • 更改VS2017默认新项目位置

    在 Visual Studio 2017 中创建新项目时是否可以更改默认路径 好的 我找到了操作方法 从 工具 gt 选项 gt 项目和解决方案 gt 位置 gt 项目位置 然后在其中输入自定义文件夹 老实说 我更喜欢 Qt Creator
  • 如何使用 dagger.android 将活动注入另一个类?

    我正在使用新的 dagger android 方法来注入活动 但我想知道如果你想注入该怎么办Activity去上课 也许是一个Navigator需要当前活动的类 package com abydos messenger ui import
  • 气流池使用的插槽大于插槽限制

    有三个传感器任务并使用相同的池 池 limit sensor 设置为1 但池限制不起作用 三个池一起运行 sensor wait SqlSensor task id sensor wait dag dag conn id dest data
  • 为什么npx每次都要安装webpack?

    我有一个与 webpack 捆绑在一起的 JavaScript 应用程序 根据文档 我使用此命令开始捆绑 npx webpack 每次我得到这个输出 npx installed 1 in 2 775s 我已经验证 webpack 命令存在于
  • 如何“填充”背景图片? [复制]

    这个问题在这里已经有答案了 I m making a website where I need to have a notable difference between fill and center background images M