使用html / js的多配置文件css属性值

Question

<div class="holder">
<div class="img">
</div></div>

这是我的html结构实现了用户配置文件的圆形样式（也有一些其他效果）。如果它是静态的，那很容易，只需在.img中设置背景。

但是我正在做一个多用户社交网络，jst想知道只更换背景属性并继续使用其他属性（例如我的情况，img类）是正确的。

Answer 1

使用border-radius你可以制作一个圆形效果然后使用background-image属性来塑造它，然后调整宽度和宽度。根据您的需要调整大小，您甚至可以使用background-size: cover来保持圆圈对图像大小的响应。

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

<style>
    .profile-circle {
        width: 50px;
        height: 50px;
        float: left;
        position: relative;
        border-radius: 50%;
        box-shadow: 0px 0px 10px #777;
        background-image: url('yourimage-50x50.png');
        background-position: -8px -4px;
        border: 2px solid white;
    }
</stlye>

Fiddle ：http://jsfiddle.net/Y3akF/

如果您想随着时间的推移更改它，那么只需按照您的描述替换background-image属性。

Answer 2

<强> HTML

<div class="base">
  <div class"inherited">
  </div>
</div>

<强> CSS

.base, .inherited{
 margin-top:3px;
 margin-left:auto;
 margin-right:auto;
 margin-bottom:0px;
}

.inherited{
 background-image:url("images/123.jpg");
 background-repeat:no-repeat;
 width:950px;
 height:572px;
}

这会将共享属性添加到两种类型的div，但仅将特定的属性添加到派生的div