Question

嗯，我搜索了很多，我发现的所有内容对我来说都不起作用，就像诅咒一样，我正在尝试做的是当正在查看网页的人时模糊背景图像看到div，我开始尝试学习CSS和JavaScript时，我很快就开始创建这个页面，所以，我所做的就是：

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title> BIRL </title>
</head>
<body>



<div class="bg-img">

<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><div class="botao"><a href="game.html"><img src="play.png" class="playButton"></a></div></center>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>

<div class="info">
<h1 class="titles">Quem nós Somos?</h1>
<a class="macaco">Nós somos uma empresa totalmente responsável e profisisonal inclinada a satisfação de nossa clientela
Nossos produtos sempre foram, são, e sempre serão destinados a nossos clientes, (salve ronildo)</a>

<h1 class="titles">Qual é a nossa missão na terra?</h1>
<a class="macaco">Nossa missão é proporcionar a melhor qualidade de entreterimento sadio para a sua família e amigos afins,
todos os nossos jogos possuem uma qualidade exemplar e classificação livre, ou seje, eles podem ser jogados por qualquer pessoa
em qualquer idade e qualquer lugar do mundo, nós nunca utilizaremos palavras de baixo calão em nossas obras eletrônicas, isto
é um exemplo para os seus filhos.</a>

</div>

</div>

</body>
</html>

的CSS：

    @font-face {
    font-family: LemonMilk;
    src: url(LemonMilk.otf);
}
.playButton {
    width: 55%;
    height: 40%;
    z-index:2;
}
.game {
    width: 100%;
    height: 100%;
}
body {
    background:url('background.jpg') no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}
.botao {
    float: rigth;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    z-index:2;
}
.info::before {
    display: block;
    width: 100%;
    height: 100%;
    background: url('background-blurred.jpg');
    background-size: cover;
    content: '';
    opacity: 1;
}
.info {
    background-color: #FFFFFF;
    font-family: LemonMilk, Verdana, Tahoma;
    padding: 70px;
    text-align: justify;

}
.titles {
    color: #000000;
    text-align: center;
    z-index: 1;
}
.macaco {
    color: #000000;
}

我想做这样的事情：http://jordanhollinger.com/media/bmu-landing.png

Answer 1

在这里：How to apply a CSS 3 blur filter to a background image

现在，有拼写错误：rigth。此外，您的代码中有许多不必要的东西，但您是初学者。继续练习，最终一切都会落在原地！

而且，很难破译你想要的东西。 “我正在尝试做的是当正在查看网页的人看到div时模糊背景图像，”

你的意思是，当带有图片的DIV可见时？

除了div

1 个答案: