css - 通过具有透明背景的图片显示背景图像

coder 2024-02-29 原文

我正在尝试为网站创建横幅。出于搜索引擎优化的目的，我决定看看我是否可以创建横幅而不是导入图像。我取得了很好的进展，但出于某种原因，我的背景图像通过覆盖在其上的 Logo 显示。

我将背景图像(在 css 中设置)设置为不透明度，因为我不想让它充满力量。我在上面放置了具有透明背景但没有不透明度的 Logo 。

目标横幅位于:

我正在尝试的代码位于:

*** HTML *****

<header>
    <div id="outer">
        <div id="background-image"></div>
        <div id="logo">
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png" />
    </div>
        <div id="lines">
            <h1 id="line1">check it out!</h1>
            <h1 id="line2">Home Inspection</h1>
        </div>
    </div>
</header>

** CSS ****

header {
    border: 3px double black;
    width: 100%;
    height: 7em;
}
#outer {
    background-size: 100% 100%;
    height: 100%;
    position: relative;
}
#background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}
#logo {
    float: left;
    border: 1px dashed green;
    height: 100%;
}
#logo img {
    height: 100%;
}
#lines {
    display: inline-block;
    border: 2px dotted blue;
    top: 0;
    bottom: 0;
}
#line1 {
    display: block;
    position: relative;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-weight: bold;
    font-size: 3em;
    color: FireBrick;
    padding: 0.1em 0 0 0;
    margin: 0 0 -0.4em 0;
    border: 2px dashed green;
    letter-spacing: 0.05em;
}
#line2 {
    display: block;
    position: relative;
    font-family:"Trebuchet", sans-serif;
    font-size: 2em;
    color: black;
    font-weight: bold;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border: 2px dashed orange;
    font-variant: small-caps;
}

谢谢!

最佳答案

诊断:

根据我对您的 CSS 的理解，#background-image 的不透明度会影响 #logo 的不透明度。

解决方案一:

如果可能，考虑使用 background-color: rgba(x,y,z,a) 的父元素背景色代替照片，其中数字 a 负责不透明度。

解决方案 2:

如果你想在彼此顶部使用两个图像，只有父元素具有不透明度，position absolute 将帮助你在单独的 div 中显示它们而没有任何不透明度问题。

关于css - 通过具有透明背景的图片显示背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18238613/

css 背景 strong code 34 seo transparency opacity png-transparency

有关css - 通过具有透明背景的图片显示背景图像的更多相关文章

ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2
我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..
ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
ruby - 通过 rvm 升级 rubygems 的问题 - 2
尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub
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
ruby - 通过 erb 模板输出 ruby 数组 - 2
我正在使用puppet为ruby程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这
ruby - 通过 ruby 进程共享变量 - 2
我正在编写一个gem，我必须在其中fork两个启动两个webrick服务器的进程。我想通过基类的类方法启动这个服务器，因为应该只有这两个服务器在运行，而不是多个。在运行时，我想调用这两个服务器上的一些方法来更改变量。我的问题是，我无法通过基类的类方法访问fork的实例变量。此外，我不能在我的基类中使用线程，因为在幕后我正在使用另一个不是线程安全的库。所以我必须将每个服务器派生到它自己的进程。我用类变量试过了，比如@@server。但是当我试图通过基类访问这个变量时，它是nil。我读到在Ruby中不可能在分支之间共享类变量，对吗？那么，还有其他解决办法吗？我考虑过使用单例，但我不确定这是
ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2
我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search
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并在看到包时选择
ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2
我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

css - 通过具有透明背景的图片显示背景图像

有关css - 通过具有透明背景的图片显示背景图像的更多相关文章

随机推荐