个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
所以我的横幅在 .wrapper.style1 中，我使用了 webkit-filter 来模糊照片，但导航栏和横幅内的信息都变得模糊。我该如何解决这个问题，让只有图像变得模糊？
这是我的 CSS 部分:
.wrapper {
padding: 6em 0em 4em 0em;
}
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
-webkit-filter: blur(10px);
background-size: cover;
}
.wrapper.style2 {
background: #f2f2f2;
}
.wrapper.style2 .major {
text-align: left !important;
}
.wrapper.style2 .major h2 {
display: block;
margin-bottom: 0.70em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.8em;
font-weight: 400;
}
.wrapper.style2 .major .byline {
letter-spacing: normal;
line-height: 1.6em;
text-transform: capitalize;
font-size: 1.4em;
}
.wrapper.style2 h3 {
display: block;
margin-bottom: 1em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.6em;
font-weight: 400;
}
.wrapper.style3 {
padding-bottom: 6em;
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style3 .container {
padding-left: 6em;
padding-right: 6em;
}
.wrapper.style3 p {
font-size: 1.6em;
}
.wrapper.style4 {
background: white;
}
.wrapper.style5 {
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style5 .image {
display: block;
width: 60%;
margin: 0em auto 2em auto;
}
.wrapper.style5 .image img {
border-radius: 50%;
border: 10px solid;
border-color: white;
}
这是一些 HTML 的副本:
<html>
<head>
<title>NueroEdge | Powered By Anazro</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script src="js/footage.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div class="wrapper style1">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="index.html" img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<!-- Nav -->
<nav id="nav">
<ul>
<img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<li class="active">
<a href="index.html">Home</a>
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</li>
</ul>
<li><a href="https://www.anazro.com/">Anazro Store</a></li>
<li><a href="left-sidebar.html">Application</a></li>
<li>
<a href="">Roster</a>
<ul>
<li><a href="#">Call Of Duty</a></li>
<li><a href="#">Streaming</a></li>
<li><a href="#">Staff</a></li>
</ul>
</li>
<li>
<a href="">More...</a>
<ul>
<!--<li><a href="#">Lorem ipsum dolor</a></li>-->
<li>
<a href="">LeaderBoard</a>
<ul>
<li>
<a href="">Ryan Tarson</a>
<ul>
<li><a href="#"><img src="images/ryantarson.png" alt="TECGaming" style="width:50px;height:50px">Ryan Tarson AKA: TECGaming</a></li>
<li><Strong>Age:</Strong> 17</li>
<li><Strong>Current Favourite Game:</Strong> Grand Theft Auto V PC</li>
<li>I am Ryan Loves video games, computers and coding specifically Java, He plays really all types of</li>
<li>games from a wide range and is willing to play any games from any genre to. He has a great and</li>
<li>fun personality which would keep you hooked on his stream like it was a drug. Ryan is the type</li>
<li>of streamer that is willing to do anything to keep his fans entertained. He has streamed before </li>
<li>but never streamed seriously but planning to do so. I am the website Programmer as well!</li>
<li>Click the links below and become apart of my life!</li>
<div class="row double">
<li><a href="https://twitter.com/TECGaming360" class="button">Twitter</a></li>
<li><a href="https://www.youtube.com/user/TECGaming360" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Kavin I.</a>
<ul>
<li><a href="#"><img src="images/profile.jpeg" alt="NueroEdge" style="width:50px;height:50px">Kavin I. AKA: KaVn Ne</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> Advanced Warefare</li>
<li>Kavin I. AKA KaVn Ne is Co-Founder along Side Ryan Tarson, Kavin loves video games</li>
<li>mostly Call of Duty because that’s all he ever plays. He mostly plays all he</li>
<li>ever plays. He mostly plays competitively and will stream singles matches or just</li>
<li>random hangouts with fans but he would play other games if Call of Duty is down</li>
<li> or someone requests something different. Kavin loves computers and any type of</li>
<li>electronics for some odd reason. Kavin has a unique personality and which could</li>
<li>make you become addicted to watching him play video games BEWARE!</li>
<div class="row double">
<li><a href="https://twitter.com/KaVn_Ne" class="button">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/UC6RGgeacGovnYZko5ZFAZjg" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Nick Marchitelli</a>
<ul>
<li><a href="#"><img src="images/Praise.jpg" alt="Praise" style="width:50px;height:50px">Nick Marchitelli AKA: Praise</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player and Captain for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the supportive role on the team and also calls most of the shots and plays since he</li>
<li>is captain but everyone has their time to shine if no plays aren’t working.</li>
<li>Hybrid player AR and SMG role.</li>
<li>Currently in 16th place In North America for win on GameBattles</li>
<li>Been Playing Competitive Since COD Ghost</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/Praise_Ne" class="button">Twitter</a></li>
<li><a href="umggaming.com/livid-praise " class="button">UMG Gaming</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Luke Pondillo</a>
<ul>
<li><a href="#"><img src="images/profile.jpeg" alt="nueroedge" style="width:50px;height:50px">Luke Pondillo AKA: Flusso</a></li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Objective role on the team he nice on the sticks with his spot on AR skills but</li>
<li>also can use a SMG, which makes him a hybrid player. The kind of player who can step up when </li>
<li>the team needs it.</li>
<li>Been Playing Competitive Since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/FlussoNe" class="button">Twitter</a></li>
<li><a href="#" class="button">YouTube</a></li>
</div>
</ul>
</li>
<br>
<li>
<a href="">Joseph Balasico</a>
<ul>
<li><a href="#"><img src="images/palm.jpeg" alt="palm" style="width:50px;height:50px">Joseph Balasico AKA: Palm</a></li>
<li><Strong>Age:</Strong> 15</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Slayer role on the team he is known to be getting 30+ kills in every respawn</li>
<li>and He is a hybrid player where he can use an AR and a SMG. His slaying skill itself helps guide </li>
<li>his team to victory.</li>
<li>Like to use an AR and SMG which makes him a Hybrid Player</li>
<li>Been Playing Competitive COD since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li><a href="https://twitter.com/LiviD_Palm" class="button">Twitter</a></li>
<li><a href="#" class="button">YouTube</a></li>
</div>
</li>
</ul>
</li>
</ul>
<!--<li><a href="#">Veroeros feugiat</a></li>-->
</ul>
</li>
</nav>
</div>
</div>
<!-- Banner -->
<<div id="banner">
<section class="container">
<h2>NueroEdge</h2>
<span>NueroEdge Outstanding performance at MLG Event</span>
<p>Looking for more fantastic players for our team!</P>
<a href="application.html" class="button alt">Sign Up</a>
</section>
</div>
</div>
最佳答案
我以前用几种不同的解决方案做过几次。我发现最有用的是使用::before 选择器。您继承指定的每个背景属性并应用过滤器。
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
background-size: cover;
}
.wrapper.style1::before {
content = "";
background: inherit;
background-size: inherit;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(10px);
}
遗憾的是，模糊不会留下尖锐的边缘，因此您可能需要放大一点才能掩盖它。
关于html - 如何模糊 CSS 样式中的横幅照片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30291372/
25
4
0
相信我，我在 Adsense 论坛(西类牙语和英语)中问过这个问题，还检查了以下资源和问题: 1 - 2 - 3 - 4 我有一个实际与 AdMob 配合使用的 AdSense 帐户。我们在 Andr
我想创建一个标题图像/横幅，单击播放图像后，它会垂直扩展以播放YouTube上托管的视频。 此页面准确显示了我要执行的操作: blendedlearningnow.com/about。 我不确定这是否
这里有一个漂亮的 Flash 横幅:http://osc4.template-help.com/drupal_30779/ 。我想知道是否有一个 jquery 库可以让我达到同样的效果。 (点击、滑动
我在一个宽度为 960px 的容器 div 中有一个标题。页眉包含几个完全位于页面中央的 Logo 。我想有一个背景渐变永远延伸到标题后面。出现问题是因为渐变横幅受限于 960px 的宽度。我尝试将横
有谁知道是否可以创建一个功能标题生成器，使用户能够使用颜色、图像和文本对其进行自定义？然后保存并添加到他们的网站？ I have created a feature banner demo here
通常在我的网页中，我会有一个 #wrapper DIV 来包装整个页面并设置为如下内容: #wrap {position: relative; width: 1000px; display: bloc
我正在寻找一种动态创建可以放置在其他页面上的横幅的方法。横幅包含一个背景图像、两个重叠图像和两个位于该背景图像之上的文本标签。 是不是只能用绝对定位来实现元素的叠加？我如何确保横幅本身相对放置在集成页
我有一个 900 x 80 的标题区域，以及一个适合该区域左上角的 175 x 75 Logo 。我想要做的是使用 jquery 将 Logo 从标题区域的右侧移动到左侧，然后卡住并设置在左侧。我知道
我成功地在页脚上显示智能横幅，然后将其处理掉。我的问题是显示在应用程序的所有页面上。 我的问题是:如何只显示在一页上？ @override void initState() { super.i
我主要是一名开发人员，不知道使用 Adobe Flash CS4。是否有一种简单的方法可以将链接添加到 Flash 横幅。我有 .flv 文件，其中包含库中的一些项目和两层。 请给我一步一步的指示
如何在响应式布局中处理 Adsense 横幅？ 据我从 Adsense TOS 中了解到，我几乎不允许在客户端对横幅做任何事情，所以我不能在客户端将横幅切换到较小的分辨率，如果它是低分辨率的. 似乎我
ChannelBannerResource chBannerResource = new ChannelBannerResource(); chBannerResource.setKind("yout
下面附有代码，我正在尝试使用 javascript 制作横幅。 使用 setInterval 我做了一个循环，一个接一个地显示 3 个 div。 我遇到的问题是，当循环结束时，有一个按钮显示“返回”，
我即将在拥有 1000 个活跃用户的应用程序中实现 AdMob 横幅。 我有 1 个 main Activity，其中包含 5 个 fragment，每个 fragment 代表不同的选项卡。 我应该
我尝试在我的应用中实现 AdMob 横幅，但它没有显示。我已经使用了横幅，并且总是使用相同的方式..我有一个带有 View 的 FrameLayout 。此 FrameLayout 位于 Linear
我在我的第一款游戏中使用 Andengine 与 Mobclix 结合使用，每当我尝试运行该应用程序时，我都会在 LogCat 中收到巨大错误。我到处都搜索过，但似乎找不到答案。 FATAL EXCE
JS: document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").onch
我想在页面底部安装一个横幅，但它与主屏幕的内容重叠。在主屏幕中有很多内容并且有滚动。 有人知道为什么吗？谢谢。 XML android:id="
我想在屏幕顶部显示横幅，但是有问题。在我的代码中(这不是我的代码，因为我正在学习过程中)我有两个选择。在屏幕底部的屏幕下方或上方显示横幅。 public void showBanner(fin
我的 AdMob 横幅显示在屏幕顶部而不是底部。 这是我的代码: adView = new AdView(mSingleton); adView.setAdSize(AdSize.SMART_BANN
我是一名优秀的程序员,十分优秀！