问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么将右下角与图片的border贴合？

头像
贝贝家的
    82734

    image.png
    image.png
    image.png

    前端csshtml
    阅读 2.3k
    4 个回答
    得票最新
    头像
    拉格朗日的假日
      1.6k1214

      直接给 div.swiper-slide 加个 overflow: hidden 就行

      头像
      汝何不上九霄
        4.8k61947

        该样式增加这个属性:border-radius: 50px;通过调整这个值来实现

        头像
        WillisYe
          1.2k1614
          <!DOCTYPE html>
<html>
<style>
    body {
        background-color: #eee;
    }
</style>

<body>

    <p>要使用的图片：</p>

    <img src="bootstrap.png" alt="tulip" id="myImage" style="margin-left:0px;" />

    <script>
        function adjustBrightness(image, brightness) {
            // 创建 Canvas 元素
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            // 设置 Canvas 的宽度和高度与图片一致
            canvas.width = image.width;
            canvas.height = image.height;

            // 在 Canvas 上绘制图片
            context.drawImage(image, 0, 0);

            // 获取 ImageData 对象
            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;

            // 调整亮度值
            const adjustedBrightness = brightness * 2.55; // 将亮度值从 -100 到 100 映射到 -255 到 255 范围内

            var count = 0
            // 遍历每个像素，调整亮度
            for (let i = 0; i < data.length; i += 4) {
                const pixelIndex = i / 4;

                // 计算当前像素点的坐标
                const x = pixelIndex % canvas.width;
                const y = Math.floor(pixelIndex / canvas.width);

                // 提取颜色通道的值
                let red = data[i];
                let green = data[i + 1];
                let blue = data[i + 2];
                let alpha = data[i + 3];

                // 遮罩层起始线
                if (y > image.height / 2) {
                    // 调整亮度
                    red += adjustedBrightness;
                    green += adjustedBrightness;
                    blue += adjustedBrightness;

                    // 确保颜色值在 0-255 范围内
                    red = Math.max(0, Math.min(255, red));
                    green = Math.max(0, Math.min(255, green));
                    blue = Math.max(0, Math.min(255, blue));

                    // 将调整后的颜色值写回 ImageData 对象
                    data[i] = red;
                    data[i + 1] = green;
                    data[i + 2] = blue;
                }
            }

            // 将修改后的像素数据重新绘制到 Canvas 上
            context.putImageData(imageData, 0, 0);

            // 创建一个新的图像对象，并将 Canvas 的绘制结果赋值给该图像对象
            const resultImage = new Image();
            resultImage.src = canvas.toDataURL();

            // 返回新的图像对象
            return resultImage;
        }

        // 获取图片元素
        const image = document.getElementById("myImage");
        image.onload = function () {
            // 调用函数来增加亮度
            const adjustedImage = adjustBrightness(image, -70);

            // 将结果显示在页面上
            document.body.appendChild(adjustedImage);
        };
    </script>

</body>

</html>
          头像
          陟上晴明
            21.4k144991
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题