模糊部分覆盖图像,实心边缘,响应图像

Question

我试图用纯HTML/CSS复制以下模糊效果.我目前的appraoch使用2张图片,原始封面图片,然后是使用CSS 的图像blur-bg-image的第二个副本filter: blur(5px);.

期望的效果:

资源

---

我找不到任何方法来保持底部部分工具栏的高度,同时保持background-image等于整个封面图像的尺寸.

overflow: hidden当父元素不是时,它对子元素不起作用position: relative.但如果父亲是亲戚,那么内部模糊的bg图像与封面图像的尺寸不同

这是基本设置:

<div class="cover-image">
    <div class="toolbar">
        <div class="blurred-bg-image"></div>
    </div>
</div>

我能找到到目前为止,唯一的解决办法是使用clip rect()上的模糊-BG-图像,然后计算出在哪里把它夹到.但是,这不是响应,并包括JS混合.

Answer 1

这是 OP 的 CodePen，显示了最终结果。

\n\n

方法

\n\n

您可以使用CSS Tricks 中描述的方法。

\n\n

该方法利用以下内容：

\n\n

\n
• 绝对定位
\n
• 转变
\n
• 一张图像作为背景和模糊效果
\n

\n\n

您必须使用媒体查询进行调整，但这并不困难。我看到的唯一主要缺点是您必须在工具栏内容上设置固定高度，因为该高度用于转换。但同样，这可以通过媒体查询轻松完成。

\n\n

请参阅以下代码片段了解源代码和演示。我在 CSS 中添加了一些注释。

\n\n

\r\n

\r\n

html,\r\nbody {\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.cover-image {\r\n    position: relative;\r\n    max-width: 1860px;\r\n    width: 100%;\r\n    max-height: 560px;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    background-color: #005FE5;\r\n}\r\n\r\n.toolbar {\r\n    position: absolute; /* put .toolbar at the bottom of .cover-image */\r\n    bottom: 0;\r\n    left: 0;\r\n    z-index: 1;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden; /* keep pseduo-element from breaking out */\r\n    -webkit-transform: translateY(100%) translateY(-10rem); /* translate down all the way, then back up by height of .toolbar-content */\r\n    -moz-transform: translateY(100%) translateY(-10rem);\r\n    -ms-transform: translateY(100%) translateY(-10rem);\r\n    -o-transform: translateY(100%) translateY(-10rem);\r\n    transform: translateY(100%) translateY(-10rem);\r\n}\r\n\r\n/* the background will be the same for both elements but we will blur the pseudo-element later */\r\n.cover-image,\r\n.toolbar::before {\r\n    background-image: url("https://dl.dropboxusercontent.com/s/3vzuc6vmfito1zg/austin-cityscape-night-hdr-1.jpg?dl=0");\r\n    background-repeat: no-repeat;\r\n    background-position: center bottom;\r\n    background-size: cover; /* scales the background accordingly */\r\n}\r\n\r\n/* use this pseudo-element for the blur effect */\r\n.toolbar::before {\r\n    content: "";\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    z-index: -1;\r\n    width: 100%;\r\n    height: 100%;\r\n    -webkit-transform: translateY(-100%) translateY(10rem); /* translate inversely to what we translated .toolbar */\r\n    -moz-transform: translateY(-100%) translateY(10rem);\r\n    -ms-transform: translateY(-100%) translateY(10rem);\r\n    -o-transform: translateY(-100%) translateY(10rem);\r\n    transform: translateY(-100%) translateY(10rem);\r\n    -webkit-filter: blur(10px); /* finally! the blur effect */\r\n    filter: blur(10px);\r\n}\r\n\r\n.toolbar-content {\r\n    position: relative;\r\n    height: 10rem; /* use this value in the transforms */\r\n    color: #FFF;\r\n}\r\n\r\n.toolbar-content ul {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 5%;\r\n    margin: 0;\r\n    padding: 0;\r\n    -webkit-transform: translateY(-50%);\r\n    -moz-transform: translateY(-50%);\r\n    -ms-transform: translateY(-50%);\r\n    -o-transform: translateY(-50%);\r\n    transform: translateY(-50%);\r\n    list-style: none;\r\n}\r\n\r\n.toolbar-title {\r\n    color: #A6BFC9;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.edit-profile {\r\n    position: absolute;\r\n    top: 50%;\r\n    right: 5%;\r\n    -webkit-transform: translateY(-50%);\r\n    -moz-transform: translateY(-50%);\r\n    -ms-transform: translateY(-50%);\r\n    -o-transform: translateY(-50%);\r\n    transform: translateY(-50%);\r\n    -webkit-appearance: none;\r\n    background-color: #00A9F3;\r\n    border: none;\r\n}\r\n\r\n@media only screen and (max-width: 66.25rem) {\r\n    .toolbar-content ul li {\r\n        margin-bottom: 0.25rem;\r\n    }\r\n\r\n    .toolbar-title,\r\n    .toolbar-detail {\r\n        display: inline-block;\r\n    }\r\n\r\n    .toolbar-title::after {\r\n        content: ":";\r\n    }\r\n}\r\n\r\n@media only screen and (min-width: 66.3125em) {\r\n    .toolbar {\r\n        -webkit-transform: translateY(100%) translateY(-6.25rem);\r\n        -moz-transform: translateY(100%) translateY(-6.25rem);\r\n        -ms-transform: translateY(100%) translateY(-6.25rem);\r\n        -o-transform: translateY(100%) translateY(-6.25rem);\r\n        transform: translateY(100%) translateY(-6.25rem);\r\n    }\r\n\r\n    .toolbar::before {\r\n        -webkit-transform: translateY(-100%) translateY(6.25rem);\r\n        -moz-transform: translateY(-100%) translateY(6.25rem);\r\n        -ms-transform: translateY(-100%) translateY(6.25rem);\r\n        -o-transform: translateY(-100%) translateY(6.25rem);\r\n        transform: translateY(-100%) translateY(6.25rem);\r\n    }\r\n\r\n    .toolbar-content {\r\n        height: 6.25rem;\r\n    }\r\n\r\n    .toolbar-content ul li {\r\n        display: inline-block;\r\n        padding: 0.625rem 1.25rem;\r\n        text-align: center;\r\n    }\r\n\r\n}

\r\n

<div class="cover-image">\r\n    <div class="toolbar">\r\n        <div class="toolbar-content">\r\n            <ul>\r\n                <li>\r\n                    <div class="toolbar-title">Edad</div>\r\n                    <div class="toolbar-detail">20 a\xc3\xb1os</div>\r\n                </li>\r\n                <li>\r\n                    <div class="toolbar-title">Cumplea\xc3\xb1os</div>\r\n                    <div class="toolbar-detail">8 de septiembre de 1994</div>\r\n                </li>\r\n                <li>\r\n                    <div class="toolbar-title">Primera Conexi\xc3\xb3n</div>\r\n                    <div class="toolbar-detail">14 de enero de 2009</div>\r\n                </li>\r\n                <li>\r\n                    <div class="toolbar-title">Klout</div>\r\n                    <div class="toolbar-detail">87</div>\r\n                </li>\r\n                <li>\r\n                    <div class="toolbar-title">Twitter</div>\r\n                    <div class="toolbar-detail">1.806</div>\r\n                </li>\r\n                <li>\r\n                    <div class="toolbar-title">Facebook</div>\r\n                    <div class="toolbar-detail">345</div>\r\n                </li>\r\n            </ul>\r\n            <button class="edit-profile" type="button">Editar perfil</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class="some-other-content">\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n    <p>You can add more content here</p>\r\n</div>

\r\n

\r\n

\r\n

\n