Question

我的html标记中包含以下代码：

<div class="profile-img">
    <img src="<?php echo $user_meta['profilepicture'][0]; ?>" />
</div>

此代码生成个人资料图片或头像。

我想将它用作CSS作为背景图像。

所以这就是我想要使用的：

<div class="profile-img">
     <style type="text/css">
        .profile-img img { background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>'); }
     </style>
</div>

我的CSS看起来像这样：

.profile-img {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 15px;
}

.profile-img img {
width: 80px;
height: 80px;
padding: 5px !important;
background: #fff !important;
border: none !important;
border-radius:500px;
-moz-border-radius:500px;
-webkit-border-radius:500px;
background-position: center center;
}

我想要实现的是一个圆形图像缩略图 - 具有按比例裁剪图像的头像。

但似乎我试图用来将图像调用到CSS中的代码不起作用。

我在哪里错了？

Answer 1

您必须添加此规则，删除将通过php解析的background-image属性。

.profile-img {
    background-image: url('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1');
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

<div class="profile-img"></div>

所以你最后的HTML添加将是：

<div class="profile-img" style="background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>');"></div>

Answer 2

如果您希望图片是背景图片而不是IMG标签的一部分，并且您需要它是动态的，那么您需要更多类似的东西：

<div class="profile-img" style="background:url('<?php echo $user_meta['profilepicture'][0]; ?>') no-repeat center center #ffffff"></div>

这会将图像作为背景放在.profile-img DIV中。那么你只是设计你的DIV：

.profile-img {
     width: 90px;
     height: 90px;
     margin: 0 auto;
     text-align: center;
     padding: 5px !important;
     border: none !important;
     -moz-border-radius:50%;
     -webkit-border-radius:50%;
     border-radius:50%; }

老实说，我还没有检查过你的CSS，因为我不确定你想要在圆形之外完成什么。我将边界半径更改为50％，因为它会创建一个圆圈。

Answer 3

希望这有帮助

<script>
 var imageSrc = "<?php echo $user_meta['profilepicture'][0]; ?>";
 $('.profile-img').css('background-image',imageSrc);
</script>

Answer 4

我不确定，但不久前我用了一些css来为webapp设置圆角。也许这会对你有所帮助：

.myImg img{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
}

将PHP图像称为CSS background-image：url

4 个答案: