Question

我目前正在php中显示用户个人资料图片，如果他们点击它，那么它会将他们带到他们自己的个人资料中。图像显示正确且链接正常工作，但链接区域延伸到图片之外并通过附近的链接。我该如何减少锚的面积呢？

    <?php }    if ($searchuser == $username)
 { ?>
                                    <a href="profile.php">
                                        <?php } ?>

                                            <div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
                                            <?php if ($searchuser == $username)
 {?>
                                    </a>
div.user-pic {
    margin: 0 auto;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: 0.09em solid white;
    position: relative;
    top: -60px;
    padding: 0px;
    z-index: -100;
}

Answer 1

试试这个：

PHP

<?php } 
    $show_user_link = false;
    if ($searchuser == $username) { 
        $show_user_link = true;
    }
?>

<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
    <?php if( $show_user_link ): ?>
        <a class="user-link" href="profile.php">
        </a>
    <?php endif; ?>
</div>

CSS

div.user-pic {
    position: relative;
}

a.user-link {
    height: 125px;
    width: 100%; 
}

你把锚放在div标签内，然后你可以使div的位置相对，锚的宽度为100％。

PS：您可以尝试使用类似

的内容

<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>

混合使用php和html以使代码更具可读性。

---编辑

好的，我明白了，看看新代码现在是否更有帮助，我认为唯一可能出错的是锚的高度，以防它不固定为125px，如果你有问题我就说。

css圆形图像锚太大了

1 个答案: