精华内容
下载资源
问答
  • I have a div with a background-image. I want to overlay the background-image with an rgba color (rgba(0,0,0,0.1)) when the user hovers the div.I was wondering if there's a one-div solution (i.e. not w...

    I have a div with a background-image. I want to overlay the background-image with an rgba color (rgba(0,0,0,0.1)) when the user hovers the div.

    I was wondering if there's a one-div solution (i.e. not with multiple divs, one for the image and one for the color, etc.).

    I tried multiple things:

    And this CSS:

    .the-div {

    background-image: url('the-image');

    margin: 10px;

    width: 200px;

    height: 80px;

    }

    #test-1:hover {

    background-color: rgba(0,0,0,0.1);

    }

    #test-2:hover {

    background: url('the-image'), rgba(0,0,0,0.1);

    }

    #test-3:hover {

    background: rgba(0,0,0,0.1);

    }

    The only option I saw is to make another image, with overlay, preload it using JavaScript and then use .the-div:hover { background: url('the-new-image'); }. However, I'd like a CSS-only solution (neater; less HTTP requests; less harddisk). Is there any?

    解决方案

    The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block - meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear gradient might be a better solution:

    Red text

    .the-div

    {

    background-image: url("the-image.png");

    color: #f00;

    margin: 10px;

    width: 200px;

    height: 80px;

    }

    .the-div:hover

    {

    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");

    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");

    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");

    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");

    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");

    }

    See fiddle. Too bad that gradient specifications are currently a mess. See compatibility table, the code above should work in any browser with a noteworthy market share - with the exception of MSIE 9.0 and older.

    展开全文
  • i am currently trying to put the notes on top of the staff ... However, the notes background are being set to the form background as shown in the image.image type used is png.//class music staffpub...

    i am currently trying to put the notes on top of the staff image. However, the notes background are being set to the form background as shown in the image.

    image type used is png.

    fsyN4.png

    //class music staff

    public MusicStaff(int xLoc, int yLoc, int xSize, int ySize)

    {

    this.SetBounds(xLoc, yLoc, xSize, ySize);

    this.Visible = true;

    ResourceManager rm = Resources.ResourceManager;

    Bitmap bmp = (Bitmap)rm.GetObject("Staff1");

    this.BackgroundImage = bmp;

    this.BackgroundImageLayout = ImageLayout.Stretch;

    this.BackColor = Color.White;

    //adding the background pic

    panel4 = new MusicStaff(3, 62, 927, 150);

    //adding a note

    MusicNote p = new MusicNote(pitch, duration, shape, s);

    p.SizeMode = PictureBoxSizeMode.StretchImage;

    p.BackColor = Color.Transparent;

    p.Size = new Size(50, 75);

    p.Location = new Point(xCounter + starterX, NoteLocations.c0.mainPoint);

    Bitmap myImage = (Bitmap)rm.GetObject(shape);

    p.Image = myImage;

    解决方案

    You are not really overlaying images. You are overlaying controls with images.

    For this to work with transparency, your notes controls need to be nested in the staff control!

    As they aren't, the transparency shows the color of their actualy parent, i.e. the form.

    Set p.Parent=panel4 and adapt the locations accordingly, i.e. make them relative to the staff..

    This is a limitation of winforms transparency, which doesn't support overlapping controls. Nested controls will work fine but only by faking the transparent parts by copying them from the parent..

    Note that as a consequence you will not be able to have the notes overlap each other or be overlapped by any other controls.

    Often giving up on using controls is the better way; instead one can simply draw all parts that make up the total..

    So you could do a series of e.Graphics.DrawImage(noteImg, x, y) in the panel4_Paint event.

    展开全文
  • 这些图片都是由CSS绘制出来的,通过background-image叠加实现, 如蘑菇头的实现,通过 radial-gradient 径向渐变 , linear-gradient 线性渐变相互叠加实现,如: 复制代码代码如下: div { width: 170px; height: ...
  • 图片叠加效果

    千次阅读 2017-12-31 13:38:50
    <!DOCTYPE html> 图片叠加效果 body{ margin: 0; } .box { position: relative;
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片叠加效果</title>
        <style>
            body{
                margin: 0;
            }
            .box {
                position: relative;
                margin: 50px auto;
                width: 650px;
            }
            .img {
                position: absolute;
                z-index: 1;
                border: 5px solid #ccc9bb;
            }
            .box:before,.box:after {
                content: "";
                position: absolute;
                background-color: #051738;
                width: 650px;
                height: 406px;
                border: 5px solid #ccc9bb;
            }
            .box:before {
                left: -10px;
                top: 0;
                transform: rotate(-5deg);
            }
            .box:after {
                top: 5px;
                left: 0;
                transform: rotate(5deg);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="1.jpg" alt="" class="img">
        </div>
    </body>
    </html>

    这里写图片描述

    展开全文
  • 图片叠加的处理 处理思路是在一张新建画布上分别将两张图片绘制出来  1.首先获取需要两张图片,并转成Bitmap类型 Bitmapbg = ((BitmapDrawable) getResources().getDrawable( R.drawable.background)).getBitmap...
  • android图片叠加方法

    千次阅读 2017-10-17 16:15:32
    Android有时候会遇到需要两张图片叠加起来的效果,现记录如下: /* *此方法分别传入两个bitmap对象,一个为底图(背景图background), *另一个则位于其上面(前景图foreground),若上面的bitmap是不透明的话, *就会...

    Android有时候会遇到需要两张图片叠加起来的效果,现记录如下:

    /*
    *此方法分别传入两个bitmap对象,一个为底图(背景图background),
    *另一个则位于其上面(前景图foreground),若上面的bitmap是不透明的话,
    *就会完全遮住下面的bitmap,那么保存为图片后,就只能看到位于上面的bitmap的信息,
    *图片的大小为两个bitmap叠加的大小。
    */ 
       private Bitmap toConformBitmap(Bitmap background, Bitmap foreground) {
            if( background == null ) {
                return null;
            }
    
            int bgWidth = background.getWidth();
            int bgHeight = background.getHeight();
            //create the new blank bitmap 创建一个新的和SRC长度宽度一样的位图
            Bitmap newbmp = Bitmap.createBitmap(bgWidth, bgHeight, Bitmap.Config.ARGB_8888);
            Canvas cv = new Canvas(newbmp);
            //draw bg into
            //在 0,0坐标开始画入bg
            cv.drawBitmap(background, 0, 0, null);
            //draw fg into
            Paint paint = new Paint();
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
            //在 0,0坐标开始画入fg ,可以从任意位置画入
            cv.drawBitmap(foreground, 0, 1000, paint);
            //save all clip
            paint.setXfermode(null);
            return newbmp;
        }

    /*
    *保存bitmap为一张图片:
    */
    private String saveBitmap(Bitmap bitmap) {
            String  imagePath = getApplication().getFilesDir().getAbsolutePath() + "/temp.png";
            
            File file = new File(imagePath);
            if(file.exists()) {
                file.delete();
            }
            try{
                FileOutputStream out = new FileOutputStream(file);
                if(bitmap.compress(Bitmap.CompressFormat.PNG, 100, out)){
                    out.flush();
                    out.close();
                }     
            } catch (Exception e) {
                Toast.makeText(this, "保存失败, 1).show();
                e.printStackTrace();
            }
            return imagePath;
    
        }
    另外有从其他博客上看到的方法,包括上下叠加,左右拼接和上下拼接。

        /*
         * 把两个位图覆盖合成为一个位图,以底层位图的长宽为基准
         * @param backBitmap 在底部的位图
         * @param frontBitmap 盖在上面的位图
         * @return
         */
        public static Bitmap mergeBitmap(Bitmap backBitmap, Bitmap frontBitmap) {
    
            if (backBitmap == null || backBitmap.isRecycled() 
                    || frontBitmap == null || frontBitmap.isRecycled()) {
                Log.e(TAG, "backBitmap=" + backBitmap + ";frontBitmap=" + frontBitmap);
                return null;
            }
            Bitmap bitmap = backBitmap.copy(Config.ARGB_8888, true);
            Canvas canvas = new Canvas(bitmap);
            Rect baseRect  = new Rect(0, 0, backBitmap.getWidth(), backBitmap.getHeight());
            Rect frontRect = new Rect(0, 0, frontBitmap.getWidth(), frontBitmap.getHeight());
            canvas.drawBitmap(frontBitmap, frontRect, baseRect, null);
            return bitmap;
        }
    
        /**
         * 把两个位图覆盖合成为一个位图,左右拼接
         * @param leftBitmap 
         * @param rightBitmap 
         * @param isBaseMax 是否以宽度大的位图为准,true则小图等比拉伸,false则大图等比压缩
         * @return
         */
        public static Bitmap mergeBitmap_LR(Bitmap leftBitmap, Bitmap rightBitmap, boolean isBaseMax) {
    
            if (leftBitmap == null || leftBitmap.isRecycled() 
                    || rightBitmap == null || rightBitmap.isRecycled()) {
                JDLog.logError(TAG, "leftBitmap=" + leftBitmap + ";rightBitmap=" + rightBitmap);
                return null;
            }
            int height = 0; // 拼接后的高度,按照参数取大或取小
            if (isBaseMax) {
                height = leftBitmap.getHeight() > rightBitmap.getHeight() ? leftBitmap.getHeight() : rightBitmap.getHeight();
            } else {
                height = leftBitmap.getHeight() < rightBitmap.getHeight() ? leftBitmap.getHeight() : rightBitmap.getHeight();
            }
    
            // 缩放之后的bitmap
            Bitmap tempBitmapL = leftBitmap;
            Bitmap tempBitmapR = rightBitmap;
    
            if (leftBitmap.getHeight() != height) {
                tempBitmapL = Bitmap.createScaledBitmap(leftBitmap, (int)(leftBitmap.getWidth()*1f/leftBitmap.getHeight()*height), height, false);
            } else if (rightBitmap.getHeight() != height) {
                tempBitmapR = Bitmap.createScaledBitmap(rightBitmap, (int)(rightBitmap.getWidth()*1f/rightBitmap.getHeight()*height), height, false);
            }
    
            // 拼接后的宽度
            int width = tempBitmapL.getWidth() + tempBitmapR.getWidth();
    
            // 定义输出的bitmap
            Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
    
            // 缩放后两个bitmap需要绘制的参数
            Rect leftRect = new Rect(0, 0, tempBitmapL.getWidth(), tempBitmapL.getHeight());
            Rect rightRect  = new Rect(0, 0, tempBitmapR.getWidth(), tempBitmapR.getHeight());
    
            // 右边图需要绘制的位置,往右边偏移左边图的宽度,高度是相同的
            Rect rightRectT  = new Rect(tempBitmapL.getWidth(), 0, width, height);
    
            canvas.drawBitmap(tempBitmapL, leftRect, leftRect, null);
            canvas.drawBitmap(tempBitmapR, rightRect, rightRectT, null);
            return bitmap;
        }
    
    
        /**
         * 把两个位图覆盖合成为一个位图,上下拼接
         * @param leftBitmap 
         * @param rightBitmap 
         * @param isBaseMax 是否以高度大的位图为准,true则小图等比拉伸,false则大图等比压缩
         * @return
         */
        public static Bitmap mergeBitmap_TB(Bitmap topBitmap, Bitmap bottomBitmap, boolean isBaseMax) {
    
            if (topBitmap == null || topBitmap.isRecycled() 
                    || bottomBitmap == null || bottomBitmap.isRecycled()) {
                JDLog.logError(TAG, "topBitmap=" + topBitmap + ";bottomBitmap=" + bottomBitmap);
                return null;
            }
            int width = 0;
            if (isBaseMax) {
                width = topBitmap.getWidth() > bottomBitmap.getWidth() ? topBitmap.getWidth() : bottomBitmap.getWidth();
            } else {
                width = topBitmap.getWidth() < bottomBitmap.getWidth() ? topBitmap.getWidth() : bottomBitmap.getWidth();
            }
            Bitmap tempBitmapT = topBitmap;
            Bitmap tempBitmapB = bottomBitmap;
    
            if (topBitmap.getWidth() != width) {
                tempBitmapT = Bitmap.createScaledBitmap(topBitmap, width, (int)(topBitmap.getHeight()*1f/topBitmap.getWidth()*width), false);
            } else if (bottomBitmap.getWidth() != width) {
                tempBitmapB = Bitmap.createScaledBitmap(bottomBitmap, width, (int)(bottomBitmap.getHeight()*1f/bottomBitmap.getWidth()*width), false);
            }
    
            int height = tempBitmapT.getHeight() + tempBitmapB.getHeight();
    
            Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
    
            Rect topRect = new Rect(0, 0, tempBitmapT.getWidth(), tempBitmapT.getHeight());
            Rect bottomRect  = new Rect(0, 0, tempBitmapB.getWidth(), tempBitmapB.getHeight());
    
            Rect bottomRectT  = new Rect(0, tempBitmapT.getHeight(), width, height);
    
            canvas.drawBitmap(tempBitmapT, topRect, topRect, null);
            canvas.drawBitmap(tempBitmapB, bottomRect, bottomRectT, null);
            return bitmap;
        }
    
    此方法只是两张图片的简单叠加拼接,而我们可能还需要一些更加复杂的叠加效果,所以android提供了16种叠加效果,请看下一篇!
    
    
    
    展开全文
  • css3 图片颜色叠加--background-blend-mode

    万次阅读 2016-06-04 14:50:52
    先创建一个DIV:div ...给这DIV添加背景颜色和背景图片: .mul{ margin: 0 auto; border: solid 1px red; width: 400px; height: 500px; background: #5bd5a0 url("su1.jpg") no-repeat center
  • Java应用:图片叠加

    2020-06-01 10:53:31
    图片叠加一. 功能目标二. 代码实现2.1 依赖2.2 图片叠加服务 一. 功能目标 现有一张背景图片,一张水印图片,希望将水印图片叠加到背景图片上方的指定位置。 本代码基于Spring boot框架搭建而成,外部发起请求,可以...
  • css也可以实现图片混合模式滤镜效果,这也是前端实现照片滤镜的原理和方法,在网页ps的滤镜叠加也是用的css滤镜叠加的方法。 滤镜css: ....
  • Android图片叠加效果

    千次阅读 2017-12-16 20:36:02
    前几天工作碰到这样一个需求,将二维码与一张海报...图片叠加的处理 处理思路是在一张新建画布上分别将两张图片绘制出来 首先获取需要两张图片,并转成Bitmap类型 Bitmap bg = ((BitmapDrawable) getResources().
  • 背景:当时有两个想法,一个是将所有图片重新做,图片亮度亮一些或者暗一些,但是太浪费时间和人工,所以就有了第二个想法,将两张透明的,一张白色亮度高一些,一张透明的灰黑色的叠加上去就行了。于是就诞生了...
  • Lorem ipsum dolor sit amet I want the caption to overlay on image but the way being done on Mashable.com I have tried following but no luck :(( .post-content { background: none repeat scroll 0 0 #...
  • 也就说,可以通过显示由多个Drawable的叠加,旋转,位移等组合显示出与单一Drawable不同的效果。在本文中我们会附上相关的效果。一、语法根据官网显示它的语法如下:xmlns:android="http://schemas.android.co...
  • vue图片叠加画矩形

    2021-04-19 10:25:07
    vue图片叠加画矩形 效果图: 容器16:9 容器9:19 重难点在css布局上面,写不好布局,就会有很多问题。 比如:容器是16:9, 图片就需要宽度占满100%;如果容器9:16,那么高度就需要占满100%。 需要做的还有获取图片...
  • css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index改变叠加顺序 <div ...
  • CSS3初级学习(二) 背景图片叠加
  • background-color: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; } div.imageSub div.label { z-index: 3; color: white; } Label Goes ...
  • 图片叠加组合 】

    2019-05-13 17:39:41
    * 修改图片,返回修改后的图片缓冲区(输出多个文本段) xory:true表示将内容在一行中输出;false表示将内容多行输出 */ public BufferedImage modifyImage(BufferedImage img, Object[] contentArr, int x, int...
  • CSS background(背景图片)详解

    千次阅读 2019-02-12 16:35:59
    “在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。...css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片background-image:url() 引入背景图...
  • QT半透明图片叠加显示

    千次阅读 2018-05-29 16:48:25
    需求描述:两张图片,一张作为背景,另一张半透明,作为前景。透过前景可以看到背景图1、用QPixmap对象载入背景图片,或者用paint代码在QPixmap自己画图;把QPixmap放入QLabel中显示;2、用QPixmap对象载入半透明...
  • background: -webkit-radial-gradient(390px 220px, 80px 160px, deeppink 30%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(75px 300px, 55px 100px, deeppink, rgba(0, 0, 0, 0)); background: radial-gradient...
  • HTML代码如下: <div class="downImg"> <div class="upImg" style="width:50%;"> </div> </div> CSS代码如下: ... background: url(../img/2_reward/welfare_pic_.png) .
  • 两张图片叠加成一张图片后使用

    千次阅读 2012-04-09 11:57:08
    使用xml文件可以让两个图片合并成一张图的效果。 合成的效果: 资源图片: 具体实现方法,在drawable文件夹中新建一个login_head.xml文件,文件的内容为:
  • //同时设置背景图片和颜色 background: #5bd5a0 url(&quot;su1.jpg&quot;); //背景混合模式 background-blend-mode: Luminosity; 混合模式: Multiply 正片叠底 Screen 滤色 Overlay 叠加 Darken 变暗 ...
  • function getbgqrcode($imageDefault,$textDefault,$background,$filename="",$config=array()){ //如果要看报什么错,可以先注释调这个header if(empty($filename)) header("content-type: image/png"); //背景...
  • 需要注意两张图片同样大小,这里只负责叠加,相信大家可能遇到的问题就是使用 ImageIO.read() 方法读取png图像,然后在一张图片上面绘制另一张图片,但是结果会丢失原来图片的透明度。 所以我们做一次重写 import ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,101
精华内容 4,440
关键字:

background图片叠加