Question

我试图复制下面的名片，用于投资组合网站。我需要的部分是方形照片模糊，里面居中（相同）的照片。

我对以下事情感到困惑：

css blur使边缘平滑，但我想要直边
css blur也会模糊儿童元素，所以在这种情况下是小照片和文字。

我喜欢使用我的代码高效，而不是过多使用像素，因为它不会响应。并尝试使用干净的代码和css选择器的更多用法，而不是div id和类。

我希望有人可以帮助我！

请参见示例图片：http://imgur.com/vWg7dYK

编辑：

我尝试过几件事，但没有取得好成绩。这就是我现在所拥有的：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="css\normalize.css">
    <link rel="stylesheet" href="css\style.css">
    <link rel="icon" href="images\">

    <title>Jobbe Maas</title>

    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container">

        <div class="personal-card">
            <!-- photo -->
            <div class="photo-wrapper">
                <img class="photo-big" src="images/me.jpg">
                <img class="photo-small" src="images/me.jpg">
            </div>

            <!-- info -->

        </div>

        <!-- <footer>&copy; Jobbe Maas 2014</footer> -->

        <!-- Scripts at the end of the document so the pages load faster -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>
        <script type="text/javascript">
            var cw = $('.photo-wrapper').width();
            $('.photo-wrapper').css({
                'height': cw + 'px'
            });
        </script>
    </div>
</body>

CSS：

.personal-card {
background-color: grey;
width: 300px;
height: 400px;
margin: 10% auto;
}

.photo-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}

.photo-big {
filter: blur(8px) sepia(25%) grayscale(25%);
-webkit-filter: blur(8px) sepia(25%) grayscale(25%);
-moz-filter: blur(8px) sepia(25%) grayscale(25%);
-o-filter: blur(8px) sepia(25%) grayscale(25%);
-ms-filter: blur(8px) sepia(25%) grayscale(25%);

width: 110%;
height: 110%;
margin: -10px -15px -15px -10px;
}

Answer 1

如果您需要的是将小图像居中，则可以使用top，left和否定margin来响应。尝试将这样的内容添加到您的小照片中：

.photo-small {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    margin-top: -25%;
    left: 50%;
    margin-left: -25%;
}

这是一个jsFiddle。希望它有所帮助。

修改

[...]并尝试使用干净的代码和css选择器的更多用法，而不是div id和类。

我忘了那一部分。您可以删除.photo-big和.photo-small类，并选择：

.photo-wrapper > img:first-child { ... } .photo-wrapper > img:last-child { ... }

如何使用html和css创建此特定投资组合名片

编辑：

1 个答案: