精华内容
下载资源
问答
  • .login {background: url(img/login.jpg) no-repeat center center;background-size: cover;...//当页面的其余部分滚动时,背景图像不会移动。width: 100%;height: 100%;position: fixed;top: 0;left: 0;right:...

    .login {

    background: url(img/login.jpg) no-repeat center center;

    background-size: cover;

    background-attachment: fixed;//当页面的其余部分滚动时,背景图像不会移动。

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    }

    问题一:

    ![QQ图片20200228120623.png](/img/bVbDTJ4)

    因为background-attachment:fixed属性在移动端不兼容,就出现了在手机端显示的时候背景图不展开的情况。

    问题二:

    bVbDTHH

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    有定位的时候,在PC端当列表内容超过屏幕高度时,列表无法下拉。

    整体来说,上面的写法对PC端、移动端都不是很友好。

    所以我搜了一个更好的写法,在背景前添加了一个伪类,即兼容性移动端,也没有列表无法滚动的问题。

    .login:before {

    content: "";

    background: url(img/login.jpg) no-repeat center center;

    background-size: cover;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    }

    展开全文
  • css 设置全屏背景图片

    2010-02-28 03:18:00
    在HTML中,当我们设置背景图,只能采用是否重叠、居中、重叠方向这几个选项,如果你有一张比较绚烂的图片想做背景,可以这样设置: body{background:url(img.jpg);background-position:center;background-...

    失眠中,起床继续学习CSS和JQ。

     

    在HTML中,当我们设置背景图,只能采用是否重叠、居中、重叠方向这几个选项,如果你有一张比较绚烂的图片想做背景,可以这样设置:

     

    body {
        background
    : url(img.jpg) ;
        background-position
    : center ;
        background-repeat
    : no-repeat ;
    }

     

     

     

     

    但效果很可能会是这样:

     

    图片没有重叠,居中,并且...她太小了,无法占领全部的页面。

     

     

    很可惜,CSS2中并没有图片全屏拉伸的属性,所以我自己想了个办法。

    利用一个DIV层,在里面装载一个IMG标签。然后设置DIV和IMG的大小为100%,并固定到屏幕最底层,这样就实现了完美的拉伸并最大化图片的目的。

     

    首先在Body中加入下面的代码:

    < div  id ="div1" >< img  src ="img.jpg"   /></ div >

     

     

    然后加入CSS代码:

     

    div#div1 {
        position
    : fixed ;
        top
    : 0 ;
        left
    : 0 ;
        bottom
    : 0 ;
        right
    : 0 ;
        z-index
    : -1 ;
    }  
    div#div1 > img 
    {
        height
    : 100% ;
        width
    : 100% ;
        border
    : 0 ;
    }

     

     

     

    最终效果:

     

    拉伸浏览器、调整网页位置后,图片背景图片依然居中全屏:

     

    火狐狸中的效果:

     

     

     

     

    这样,我们实现了固定居中且自动拉伸全屏的背景图片,不过她是一个层,所以当用户在页面空白处右键的时候,显示的就是图片的信息,这可能会让用户感觉不方便。

    实际上,火狐的拉伸效果比IE强很多,会自动羽化图片的细节。IE在图像拉伸后的像素点非常难看,所以建议用高分辨的图像作为背景。

     

    新手向,高人请指导,谢谢。

     

     夜闻香原创,转载请保留此信息,万分感谢!
     博客: http://clso.cnblogs.com/
     主页: http://cleclso.cn/
     QQ:315514678 E-mail:clso#qq.com
     欢迎技术交流!

    转载于:https://www.cnblogs.com/clso/archive/2010/02/28/1675006.html

    展开全文
  • 背景图适应全屏

    2018-03-27 11:02:02
    background: url("images/img1.jpg") no-repeat; background-size:100% 100%; background-attachment: fixed; width: 100%; height: 100%; position: fixed; top:0; left:0; right:0;...
    background: url("images/img1.jpg") no-repeat;
    background-size:100% 100%;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    展开全文
  • 需求:在当前页面悬浮显示图片,背景位透明色。 废话不多说,直接上代码。 先引入两个库,很常见的啦~~ compile 'com.github.chrisbanes.photoview:library:+' ...--全屏背景半透明 dialog--> <st...
    需求:在当前页面悬浮显示图片,背景位透明色。

    废话不多说,直接上代码。

     

     

    先引入两个库,很常见的啦~~

    compile 'com.github.chrisbanes.photoview:library:+'
    compile 'com.github.bumptech.glide:glide:3.7.0'
    
    <!--全屏背景半透明 dialog-->
    <style name="transparentBgDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:background">@color/transparent</item>
        <item name="android:windowNoTitle">true</item>
    </style>

     

    颜色值要透明哦,也可其他色。看产品需求吧,嘻嘻
    <color name="transparent">#00000000</color>

     

    敲黑板划重点啦!!!代码Ctrl +C 吧。哈哈

    public class ShowImagesDialog extends Dialog {
    
        private View mView;
        private Activity mContext;
        private PhotoView photoView;
        private String imgUrls;
    
        public ShowImagesDialog(@NonNull Activity context, String imgUrls) {
            super(context, R.style.transparentBgDialog);
            this.mContext = context;
            this.imgUrls = imgUrls;
    
    
            initView();
            initData();
        }
    
        private void initView() {
            photoView = new uk.co.senab.photoview.PhotoView(mContext);
    
        }
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(photoView);
            Window window = getWindow();
            WindowManager.LayoutParams wl = window.getAttributes();
            wl.x = 0;
            wl.y = 0;
    
            DisplayMetrics metrics = new DisplayMetrics();
            mContext.getWindowManager().getDefaultDisplay().getMetrics(metrics);
            wl.height = metrics.heightPixels;
            wl.width = metrics.widthPixels;
            wl.gravity = Gravity.CENTER;
            window.setAttributes(wl);
        }
    
        private void initData() {
            //点击图片监听
    
            Glide.with(mContext)
                    .load(imgUrls)
                    .placeholder(R.mipmap.ic_launcher)
                    .error(R.mipmap.ic_launcher)
                    .into(new SimpleTarget<GlideDrawable>() {
                        @Override
                        public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
                            photoView.setImageDrawable(resource);
                        }
                    });
    
        }
    }

     

    看效果:惊艳吧。哈哈

     

    菜鸟笔记,大神勿喷。谢谢~~

    交流QQ:948879263

    展开全文
  • JQUERY制作的图片可全屏背景投影效果.rar
  • 背景全屏且自适应

    2015-07-16 09:44:05
    背景图片全屏且自动随窗口大小而调整,支持动态图片
  • 以小米手机为例,QQ设置全屏资料背景方法如下:1、进入手机QQ主页面,找到左上角【头像】选项,点击打开。2、在头像界面,找到【个性装扮】选项,点击打开。3、在个性装扮界面,找到【名片】选项,点击打开。4、在...
  • 6个非常精美的jQuery背景动画个性全屏焦点(四)
  • 近期做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果非常赞,于是也做了个类似的效果。例如以下。我不知道QQ那个是怎么做的。我的思路例如以下:首先。从图片缩略界面跳转到...
  • 全屏背景实现 截图功能实现(一)

    千次阅读 2013-05-30 13:09:02
     经过一天的时间,网上翻阅了一些资料,其实截图功能的原理相当简单一下子信心,就是创建一个全屏的对话框置顶显示(注意是当前窗口最顶)并且把当前桌面上的所有可见当作该对话框的背景,如果实现了以上的功能表示...
  •  不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ、微信等。这个启动画面中往往会将ActionBar和Status Bar隐藏掉,然后用户进入一种沉浸的状态,形成更...
  • 图片放大为全屏显示

    2015-07-22 17:48:49
    点击图片,图片全屏显示,背景为黑色(类似点击头微信像放大的效果) 使用方法:图片添加点击时间后调用[ImageEnlargeBrowser showImage:ImageView];
  • Android-->Toast全屏和动画(模拟QQ样式)

    千次阅读 2017-01-14 13:41:17
    , 底下是一个空布局, 参考我的博文: http://blog.csdn.net/angcyo/article/details/53967099 顶部就是一个Toast. 全屏,并且进入和退出都有自定义的动画.正文: 系统并没有提供设置全屏和动画的方法.但是Java有...
  • 全世界只有不到1%的人关注了壁纸阿姨你真是个特别的人2020.2.15爱你这件事没有解药“你就像香甜的气泡”——网易云音乐《urface》热评朋友圈背景图全文字数:331阅读时间:1分钟图片数目:32 1 “我们都喜欢光,虽然...
  • 全屏背景不仅仅是一些插画及设计,也可以是真实的摄影,当然也要控制好图片的大小了。下面设计达人将会教大家如果设置全屏背景以及分享一些全屏背景的网页设计案例。方法1:利用CSS样式让背景全屏于...
  • 原文地址::https://blog.csdn.net/wwwwwwwwwwwwdi/article/details/53994415 相关文章 1、如何启动app时全屏显示Default.png(图片)?... 2、iOS 如何设置一整张图片作为背景图片(穿透导航栏)----htt...
  • 这是正常的,背景图片占满全屏 当页面内容变长出现了滚动条时,背景图片显示出现了问题  问题解决   下面附上我解决这个问题的代码:  js代码: /* * 根据类名获取元素 */ docu...
  • 浏览器全屏时,页面一般可以正常显示,但当页面进行缩放时,就会出现很多问题,今天主要解决:页面变小时,浏览器右边会出现空白背景。 主要原因 当浏览器窗口变小时,浏览器默认100%宽度为浏览器窗口的宽度,而忽略...
  • 最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果。如下。 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略...
  • 实现的功能 上拉界面背景图片逐渐消失,下来界面背景图片放大(动态改变UIImageView的高度...功能实现类似于QQ中的好友动态的顶部效果。 知识准备 导航条和导航条的子控件是不能直接通过alpha属性来隐藏的或...
  • 最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果。如下。 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略...
  • 我在代码里面写的是: pagefactory.setBgBitmap(BitmapFactory....修改了背景图片 但是我发现这样不能解决问题,因为图片只显示一部分在左上角怎么才可以让其显示在全屏,还有就是怎么样可以让我的app让腾讯qq可以调用
  • 说来不怕可笑,这双打游戏的手都快忘了代码怎么写的了,编写一个页面,当设置背景时,一直出现莫名其妙的错误。 在这里记录一下,不能连背景... background: url(../img/QQ图片20200226123957.jpg) no-repeat; ba...
  • 设置vscode全背景图片

    千次阅读 2019-12-26 14:44:04
    1:右键管理员身份运行vscode 2:商店搜索下载【bankground-cover】插件 3:【ctrl+shift+p】,输入【backgroundCover - start】命令 4:然后可以选择背景图片和设置透明度 ...
  • 仿微博、微信、qq 点击缩略, 查看高清 UI 组件
  • H5 背景图片自适应屏幕问题解决办法
  • VSCode设置全背景图片

    千次阅读 2020-09-11 22:08:48
    方法一:直接修改源文件css 帮助 -> 切换开发人员工具,找到下面这行,粘贴地址到文件夹里打开。... } 方法二:下载background-cover插件 下载了插件以后,点击vscode右下方按钮,然后选择背景图,重启vscode即可

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,683
精华内容 2,273
关键字:

qq全屏背景图