Question

我试图让你可以看到来自该圈子上数据库的图像！但是如果我通过css将一个背景图像放在一个类上，它就完全适合

https://i.gyazo.com/cf7f8332acd5967f109f58de6ef1a578.gif

如果我使用asp：image它就会停止工作

https://i.gyazo.com/5c06753b959a698d276e13fd44d90c61.gif

有什么想法吗？这是我的图像的c＃代码

    <div id="imagemuser" style="display:none">
                 <ul class="ch-grid">
                    <li>
                     <div class="ch-item ch-img-2 ">
                         <asp:Image ID="Image1" runat="server" imageurl="http://i.kinja-img.com/gawker-media/image/upload/x1hua0lnuultijaxcafc.jpg"/>
                     <div class="ch-info" >

                      <a onclick="$('#email').hide();$('#escolherimag').show();$('#idade').hide();$('#idadeeditar').show();$('#Buttonseditar').show();$('#Buttons').hide();$('#cocktailcriado').hide();$('#biografia').hide();$('#biografiaeditar').show();$('#Nomedoperfil').hide();$('#fechar').show();$('#Nomedouser').hide();$('#Nomedousereditar').show();$('#telefone').hide();$('#telefoneeditar').show();" >
                         <h3>
                          Edita aqui
                      </h3>
                         <p class="tex">Edite o seu perfil há sua maneira!</p>
                         </a> </div>
                             </div>
                                 </li>
                    </ul>
                        </div>

这是我用于此圈子的css代码

    #imagemuser .ch-grid {
    bottom: 50%;
    display: inline;
    left: 42%;
    position: absolute;
    width: 15%;
    z-index: 10;
}

#imagemuser {

}
   .ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-grid li {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

.ch-img-2 { 
    background-image: url(https://cdn.meme.am/images/300x/2793196.jpg);
}

.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}



.ch-info p {
    color: white;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}

.ch-info p:hover {
    color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}

.ch-item:hover .ch-info p {
    opacity: 1;
}

Answer 1

这是完成工作的一种方式，基本上它会使背景图像动态化。

variable = query....
    <div class="ch-item" style="background-image:url(variable); background-position:center; background-size:cover;">

在圆上拟合图像的Css和c＃问题

1 个答案: