如何使用html和css创建此特定的公文包名片_Html_Css_Alignment_Blur_Portfolio

如何使用html和css创建此特定的公文包名片

html css

如何使用html和css创建此特定的公文包名片,html,css,alignment,blur,portfolio,Html,Css,Alignment,Blur,Portfolio,我正试图复制下面的名片为一个投资组合网站。我需要的是一张模糊的方形照片，里面的照片居中我被以下事情绊倒了： css模糊使边缘平滑，但我想要直边 css blur也会模糊子元素，因此在本例中是小照片和文本。我喜欢高效地使用代码，不要过多地使用像素，因为它不会响应。并尝试使用干净的代码和更多的css选择器，而不是div id和类我希望有人能帮助我请参见下面的示例图像：编辑：我试过好几件事，但都没有好结果。这就是我现在得到的： HTML: 如果您需要的是将小图像居中，您可以使用上、左和负

我正试图复制下面的名片为一个投资组合网站。我需要的是一张模糊的方形照片，里面的照片居中

我被以下事情绊倒了：

css模糊使边缘平滑，但我想要直边 css blur也会模糊子元素，因此在本例中是小照片和文本。我喜欢高效地使用代码，不要过多地使用像素，因为它不会响应。并尝试使用干净的代码和更多的css选择器，而不是div id和类

我希望有人能帮助我

请参见下面的示例图像：

编辑：我试过好几件事，但都没有好结果。这就是我现在得到的：

HTML:

如果您需要的是将小图像居中，您可以使用上、左和负边距进行响应。尝试将以下内容添加到您的小照片中：

.照片小{ 宽度：50%；身高：50%；位置：绝对位置；最高：50%；利润率最高：-25%；左：50%；左边缘：-25%； } 这是一个例子。希望能有帮助

编辑：

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

我忘了那部分。您可以取消.photo大类和.photo小类，并使用以下选项选择它们：

.photo wrapper>img:第一个孩子{…} .photo wrapper>img:最后一个子项{…}

。照片包装将扩展到其内容的大小，显示边缘。尝试通过指定位置使其小于图像：相对；加上要约束的宽度和高度会导致溢出：隐藏以实际裁剪。谢谢！边缘现在好了。但是我怎样才能在大图的中间和顶部得到较小的图片呢？顺便说一句：你可以在这里看到网站直播：为.photo wrapper.photo small添加一个CSS类，并给它一个位置：绝对；和top:和left:设置其相对位置的值。照片包装器不知道图像的大小，我无法给出实际的CSS

<!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>

.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;
}