背景图像:如果图像很小,如何填充整个div,反之亦然

2024-04-26

我有三个问题:

  1. 当我尝试在较小尺寸的 div 中使用背景图像时,div 仅显示图像的一部分。如何显示图像的完整或特定部分?

  2. 我有一个较小的图像,我想在更大的 div 中使用。但不想使用重复功能。

  3. CSS 有什么方法可以控制图像的不透明度吗?


调整图像大小以适合 div 大小。
使用CSS3你可以这样做:

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

如何拉伸网页中的背景图像 http://webdesign.about.com/od/css3/f/blfaqbgsize.htm:

关于不透明度

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

或者看看CSS 图像不透明度/透明度 http://www.w3schools.com/Css/css_image_transparency.asp

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

背景图像:如果图像很小,如何填充整个div,反之亦然 的相关文章

  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • 样式 ::-webkit-scrollbar-track 不起作用

    我正在尝试设置滚动条轨道的样式 每当我设计曲目时 div webkit scrollbar track background color blue 没有什么变化 每当我设置滚动条样式时 div webkit scrollbar backgr
  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框?

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成
  • 如何处理 Django 中的错误

    我想让我的 django 应用程序尽可能对用户友好 并且我想处理适当的错误并让它推出类似于 javascript 中的警报的错误消息 我想在没有上传文件时执行此操作 因此 当按下上传按钮并且尚未上传任何内容时 将会发出一条警报消息 我的看法
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在
  • 使用“表单控件”删除输入字段的轮廓

    我有一个输入字段 如下所示 在类名中我将其作为form control
  • 编辑类名中带有空格的元素的 css 样式

    我正在创建一个 tumblr 我必须编写一个外部 CSS 文件 但我在编辑 post 元素的 css 样式时遇到问题 这是它的结构 li class post quote other code li 问题是类名中有空格 我如何创建一个 CS
  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像
  • 如何在日期选择器中设置不在当前月份的单元格的样式

    我目前正在为我的 JavaFX 应用程序制作注册表 问题是 当日期选择器中的单元格不在页面的月份上时 我想让该单元格变灰 让我们看看我当前的日期选择器 我的日期选择器 正如您所看到的 我希望下个月的日期 27 日 28 日 30 日以及 1
  • 如何将大于整个页面 100% 的元素居中对齐?

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

随机推荐

  • Angular 9 ngtypecheck

    更新到 Angular 9 后 我收到警告 src main ngtypecheck ts is part of the TypeScript compilation but it s unused Add only entry point
  • 如何在 Swift 中处理 NSUserDefaults 中的非可选值

    从中获取值NSUserDefaults我会做这样的事情 let userDefaults NSUserDefaults standardUserDefaults if let value userDefaults objectForKey
  • 如何将值从对象转换为 Nullable<> [重复]

    这个问题在这里已经有答案了 我有一些带有一些属性的类 我想将值从字符串转换为该属性的类型 我在转换为可为空类型时遇到问题 这是我的转换方法 public static object ChangeType object value Type
  • 绑定到 AvalonDock 2 中的 LayoutAnchorableItem 可见性

    我正在尝试绑定Visibility of LayoutAnchorableItem到 ViewModel 中的布尔值 以便我可以以编程方式显示和隐藏可锚定
  • .rmd 文件的访问名称并在 R 中使用

    我正在编织一个名为MyFile rmd 我如何访问该字符串MyFile在编织过程中并将其用于 在 YAML 标头的标题部分中使用 在后续的 R 块中使用 title r rmarkdown metadata title author My
  • 如何在maven antrun插件中执行输入任务

    我创建了一个 Maven 项目 我正在尝试运行外部脚本 在此外部脚本中 我使用 read 命令来提出问题并获得答案 如果我做一个 它会起作用sudo mvn 包 with 执行 maven 插件 http www mojohaus org
  • Android 位图图像缓存

    嗨 我正在 Android 中实现图像缓存 经历过这个 http developer android com training displaying bitmaps cache bitmap html http developer andr
  • 如何在滑块上方添加刻度和标签?

    我尝试使用 Slider 划分看起来不错 值 gt 50 10 20 但是 如何在滑块上方添加刻度和标签 Expect 勾选将根据滑块位置改变颜色 Actual Slider min 0 max 100 value value onChan
  • UITableView的separatorEffect属性有什么用?

    iOS 8 中的新功能是separatorEffect属性 您可以为其分配 UIVisualEffect 有谁知道这是做什么用的吗 我试过了 但我不认为它有任何 呃 视觉效果 我想知道完全相同的事情 所以我放了一个Github https
  • random.seed():它有什么作用?

    我有点困惑什么random seed 在 Python 中是这样的 例如 为什么下面的试验会 一致地 做他们所做的事情 gt gt gt import random gt gt gt random seed 9001 gt gt gt ra
  • wxPython:在现有 wx.Panel 上覆盖 wx.Panel 的好方法

    我有一个 wx Frame 其中有一个主 wx Panel 其中有几个小部件 我想要其中的一个按钮来启动 帮助面板 这个帮助面板可能是一个wx Panel 我希望它覆盖整个主wx Panel 不包括wx Frame的菜单栏 帮助按钮上应该有
  • 如何在 HTML 文件中包含 python 脚本?

    我该如何放置这个Python脚本 a f d s a x 1 scope vars for i in a scope x 1 print a x html 文件里面 像这样 如果你想创建一个html 不一定显示它 html file ope
  • pygame中盒子的连续移动

    我编写了以下代码来创建一个简单的游戏 当您单击键盘上的箭头时 一个框会在游戏中移动一个单位 我试图做到这一点 以便如果我按下任何箭头按钮 盒子将继续朝该方向移动 直到按下另一个箭头 因此 如果我按一次向右箭头而不是快速移动 50 像素 它将
  • 如何使用 ES6 样式导入添加外部 javascript 库?

    我无法准确理解如何在新的 ES6 项目中使用旧的 javascript 库 我正在查看一个使用 webpack 编译 使用 ES6 编写并使用 Babel 转译的 React 项目 每个组件都遵循import from 符号 我想在项目中使
  • 类继承命名

    我想继承 DevExpress ComboBoxEdit 控件 并且想知道将我的类命名为与 DevExpress 类相同的名称是否是不好的做法 这是派生类声明 using System using System Collections Ge
  • 如何在 Jenkins Freestyle 项目中使用可锁定资源插件中的 Groovy 表达式

    这个问题是针对旧版本提出的可锁定资源插件 https wiki jenkins ci org display JENKINS Lockable Resources Plugin 旧版本中的错误自2 1版本以来已得到修复 然而 没有描述如何在
  • 使用 Buildbot 支持多个存储库

    目前 Buildbot 不支持多个存储库 如果需要这一点 则需要运行单独的 Buildbot 实例 我仍然很好奇是否有人想出了一个创造性的解决方法来让这个功能正常工作 Update 这个答案最近收到了一些反对票 请注意 这个答案适用于 20
  • 刚刚通过 NuGet 更新了 ImageResizer,无法运行应用程序,因为它找不到 BundleAttribute

    我只是想更新 Azure 存储 但这意味着我需要更新 ImageResizer AzureReader 并更新应用程序以使用 Net 4 5 2 Azure 站点设置为 Net 4 6 现在我已经拥有了最新版本的所有内容 我已经清理并重建了
  • Prismic - 如何在不暴露访问令牌的情况下进行 API 调用

    我正在构建一个 vue js Web 应用程序 我想对我的 prismic 存储库进行相应的调用 但我不知道如何在不暴露我的访问令牌的情况下执行此操作 我正在使用所示的其余 api 方法here https prismic io docs
  • 背景图像:如果图像很小,如何填充整个div,反之亦然

    我有三个问题 当我尝试在较小尺寸的 div 中使用背景图像时 div 仅显示图像的一部分 如何显示图像的完整或特定部分 我有一个较小的图像 我想在更大的 div 中使用 但不想使用重复功能 CSS 有什么方法可以控制图像的不透明度吗 调整图